vue2 study
1.0.0
3. Instal plugin webpack-html
4Instal vue
5Instal pembaruan terbaru webpack-dev-server
6Pasang babel
7Instal vue-loader untuk memproses file vue
8Gunakan perutean vue-router2
9.1Aplikasi dasar vuex
9.2 Perpecahan negara bagian
10 Komponenisasi dan transfer nilai antar komponen
11. Gunakan nodejs+koa2 untuk menyediakan antarmuka latar belakang
12. Atur koa untuk mengizinkan akses lintas domain front-end
13 Gunakan aksio untuk mengakses antarmuka backend
git clone https://github.com/liubin915249126/vue2-study.git
cd vue2-study
安装cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install //安装依赖包
npm start //启动项目
cd 'ke/jalur/Anda' npm init
Dibagi menjadi instalasi global dan instalasi intra-proyek
npm install webpack -g
npm install webpack --save-dev
const path = require('path');
module.exports = {
entry: './Script/main.js', //项目入口文件
output:{ //输出编译后文件地址及文件名
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
};
Jalankan perintah webpack pada baris perintah untuk melihat file yang dikompilasi.
npm instal html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
...
new HtmlWebpackPlugin({
title:'react 学习',
inject:'body',
filename:'index.html',
template:path.resolve(__dirname, "index.html")
}),
...
]
Jalankan perintah webpack lagi dan Anda akan melihat file index.html tambahan. File ini dibuat berdasarkan template dan secara otomatis memasukkan file js yang dihasilkan oleh paket.
npm install vue -save
Ubah main.js:
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
Ubah indeks.html:
<div id="main">
<h3>{{message}}</h3>
</div>
Saat menjalankan pengemasan webpack dan menjalankan index.html (file paket), kesalahan dilaporkan. Setelah diperiksa, dikonfigurasi di webpack.config.js:
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
Jalankan lagi untuk melihat efeknya 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
Konfigurasikan webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...
Konfigurasikan perintah di package.json
"start":"webpack-dev-server --hot --inline --progress --open"
Jalankan npm start dan browser akan secara otomatis membuka halaman tersebut. Setelah mengubah file, Anda dapat melihat halaman diperbarui secara real time.
Sebelum menggunakan file .vue, Anda harus menginstal babel terlebih dahulu (konversi sintaks es6 ke es5)
npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev
npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev
Buat file .babelrc baru dan konfigurasikan di direktori root proyek:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Instal pemuat untuk memproses file .css, .vue
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
Konfigurasikan webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
Setelah dikonfigurasi dan dijalankan, muncul pesan kesalahan: Tidak dapat menemukan modul 'vue-template-compiler' Instal vue-template-compiler
cnpm install vue-template-compiler --save-dev
Ubah indeks.html:
<body>
<div id="main">
<app></app>
</div>
</body>
Buat src/index.vue baru:
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>
Ubah main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
Setelah menyimpan, jalankan npm start untuk melihat efeknya. 
Ubah kode dan lihat efek yang dimodifikasi.
Instal pertama vue-router:
npm install vue-router --save
Ubah main.js:
1. Perkenalkan APP dan sekitar dua komponen, impor komponen router, dan perkenalkan sub-komponen Anak.
import App from './src/index.vue';
import About from './src/about.vue';
import Child from './src/children.vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)
2. Tentukan rute: Rute bersarang disimpan dengan anak:[], dan komponen anak berada di komponen induk.
<router-view></router-view>
Dalam rendering, rute mendefinisikan parameter melalui "/:id", meneruskan parameter melalui link "/about/123", dan memperoleh parameter melalui {{$route.params.id}} di komponen.
const routes = [
{ path: '/index', component: App },
{ path: '/about/:id', component: About ,children:[
{ path: 'child', component: child}
]}
]
routes const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
const app = new Vue({
router
}).$mount('#main')
5. Ubah file index.html
<div id="main">
<p>
<router-link to="/index">index</router-link>
<router-link to="/about/123">about</router-link>
<router-link to="/about/123/child">child router</router-link>
</p>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
6. Setelah memodifikasi komponen induk about.vue, saya menemukan bahwa hanya ada satu tag HTML tingkat atas.
</template>
<div>
<div class="message">{{ msg }}</div>
<div>
<span>传递的参数为：{{ $route.params.id }}</span>
<router-view></router-view>
</div>
</div>
</template>
routes: [
...
{ path: '/a', redirect: '/index' }
]
Saat mengakses /a, komponen yang sesuai dengan nilai /index akan dilompati.
Saat menulis aplikasi satu halaman dengan vue.js, paket JavaScript yang dikemas akan sangat besar, sehingga memengaruhi pemuatan halaman. Kita dapat menggunakan perutean pemuatan lambat untuk mengoptimalkan masalah ini. Ubah penulisan rute menjadi:
//定义路由
const routes = [
{ path: '/index', component: resolve => require(['./src/index.vue'], resolve) },
{
path: '/about/:id', component: resolve => require(['./src/about.vue'], resolve) ,
children:[
{ path: 'child', component: resolve => require(['./src/children.vue'], resolve)}
]},
{ path: '/a', redirect: '/index' }
]
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Referensi: rendering vue-router: 
Instal vuex
npm install vuex --save
Buat file store.js baru:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
// 存储状态值
state: {
count:1
},
// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
mutations: {
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
},
// 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
getters: {
},
actions: {
}
})
// 要改变状态值只能通过提交mutations来完成
export default store;
Suntikkan penyimpanan di main.js;
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
Buat file count.vue baru, dan buat rute baru yang menunjuk ke komponen count untuk merujuk pada penggunaan vue-router. file hitung.vue:
<template>
<div>
<div>{{$store.state.count}}</div>
<div>
<span @click="increment">increment</span>
<span @click="decrement">decrement</span>
</div>
</div>
</template>
<style>
</style>
<script>
export default {
data(){
return {};
},
methods:{
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
}
}
}
</script>
Render: 
Karena penggunaan pohon keadaan tunggal, seluruh keadaan aplikasi akan terkonsentrasi pada objek yang relatif besar. Ketika sebuah aplikasi menjadi sangat kompleks, objek penyimpanan berpotensi menjadi sangat membengkak. Untuk mengatasi masalah di atas, Vuex memungkinkan kita membagi penyimpanan menjadi beberapa modul. Setiap modul memiliki status, mutasi, tindakan, pengambilnya sendiri
Buat moduleA.js baru, moduleB.js
Dan ubah store.js:
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
Jika Anda ingin mengakses status dalam suatu komponen, Anda harus menggunakannya
$store.state.moduleA.count
$store.state.moduleB.Name
Render: 
Metode modifikasi keadaan dalam mutasi tetap tidak berubah.
Komponen adalah salah satu fitur paling canggih dari Vue.js. Komponen dapat memperluas elemen HTML dan merangkum kode yang dapat digunakan kembali. Pada tingkat tinggi, komponen adalah elemen khusus yang ditambahkan fungsionalitas khusus oleh kompiler Vue.js. Dalam beberapa kasus, komponen juga dapat muncul sebagai elemen HTML asli yang diperluas dengan atribut is.
Cara menulis komponen A:
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
Cara menulis komponen B:
<template>
<div class="message" id="componentB">
...
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.component('my-component', {
template: '#componentB ',
data(){
return {
msg: 'component-B',
}
}
})
</script>
<style>
</style>
Di komponen komponen induk, masing-masing referensi dan hang in
<template>
<div>
<component-A ></component-A>
<component-B></component-B>
</div>
</template>
<script>
import componentA from './component-a.vue';
import componentB from './component-b.vue'
export default {
data () {
return {
}
},
components:{
"component-A":componentA,
"component-B":componentB
}
}
</script>
<style>
</style>
Untuk komunikasi antara komponen induk-anak sederhana atau komponen saudara yang termasuk dalam komponen induk yang sama, vue menyediakan metode.
Komponen induk:
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
Subkomponen:
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
Komponen induk:
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
Subkomponen:
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
Render: 
Render: 
file bus.js:
import Vue from 'vue'
export default new Vue()
Komponen B $emit memicu kejadian:
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
Komponen A$on menerima data pengiriman acara
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
Render: 
npm instal koa koa-router --save-dev
Buat file server/index.js baru index.js di direktori root:
const Koa = require('koa');
const router = require('koa-router')();
const app = new Koa();
router.get('/', (ctx, next)=> {
ctx.response.body = '111'
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('server is start at port 3000')
});
Tetapkan perintah di package.json: "server":"node server index.js" Mulai layanan: npm run server. Kunjungi localhost/3000 di browser untuk melihat nilai yang dikembalikan.
Gunakan koa2-cors untuk menyiapkan instalasi lintas domain npm install koa2-cors --save-dev
...
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/test') {
return false;
}
return '*';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));
...
Instal aksio:
npm install axios --save
Buat server/request.js baru di direktori root untuk merangkum fungsi permintaan. Semua permintaan melewati fungsi permintaan untuk memfasilitasi pemrosesan permintaan terpadu.
import axios from 'axios'
let BASE_URL = 'http1://localhost:3000'
export default function request(data){
let options = {...data}
options.url = `${BASE_URL}${data.url}`
return axios(options)
.then(checkStatus)
.then(parseJSON)
.catch()
}
(pit) axios.defaults.withCredentials = "include" //Bawakan cookie saat membuat permintaan Permintaan Axios secara default tidak menambahkan cookie dan perlu disetel (pit) Saat menyetel cookie dengan cookie saat meminta, lintas domain diizinkan oleh backend tidak dapat digunakan "* "Untuk menjelaskan protokol + nama domain + port permintaan rendering data: rendering
Instalasi: npm i element-ui -S pengenalan:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
Penggunaan: Konfigurasikan css dan file loader sebelum digunakan dan instal style-loader dan css-loader
npm install css-loader style-loader file-loader --save-dev
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
loader: 'file-loader'
},
{
test: /.(png|jpe?g|gif|svg)(?S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
Memasang:
cnpm install less less-loader --save-dev
menggunakan:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. Parameter lompatan rute:
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. Gunakan editor teks kaya: vue2-editor Instalasi: cnpm install vue2-editor --save Penggunaan: import { VueEditor } dari 'vue2-editor'
Menggunakan cross-env: Siapkan instalasi lingkungan pengembangan: perintah konfigurasi cnpm install cross-env --save-dev:
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --open",
"build":"cross-env NODE_ENV=production webpack"
Ubah konfigurasi webpack:
if (process.env.NODE_ENV === 'production') {
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
IS_PRODUCTION: true
}),
/*new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
sourceMap: false
}),*/
]);
}
else {
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env':
{
'NODE_ENV': JSON.stringify('development'),
},
IS_PRODUCTION: false
}),
]);
}
Dapatkan variabel lingkungan saat ini dalam program melalui: process.env.NODE_ENV
