vue2 study
1.0.0
3. Instale el complemento webpack-html
4Instalar vista
5Instale la actualización activa de webpack-dev-server
6Instalar babel
7Instale vue-loader para procesar archivos vue
8Utilice enrutamiento vue-router2
9.1Aplicaciones básicas de vuex
9.2División del Estado
10 Componentización y transferencia de valor entre componentes
11. Utilice nodejs+koa2 para proporcionar una interfaz en segundo plano.
12. Configure koa para permitir el acceso entre dominios front-end
13 Utilice axios para acceder a la interfaz 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 'a/tu/ruta' npm init
Dividido en instalación global e instalación dentro del proyecto.
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'
}
};
Ejecute el comando webpack en la línea de comando para ver los archivos compilados.
npm instala el complemento html-webpack --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
...
new HtmlWebpackPlugin({
title:'react 学习',
inject:'body',
filename:'index.html',
template:path.resolve(__dirname, "index.html")
}),
...
]
Ejecute el comando webpack nuevamente y verá un archivo index.html adicional. Este archivo se genera en función de la plantilla e introduce automáticamente el archivo js generado por el paquete. Ejecute el index.html empaquetado para ver el efecto.
npm install vue -save
Modificar main.js:
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
Modificar index.html:
<div id="main">
<h3>{{message}}</h3>
</div>
Al ejecutar el empaquetado del paquete web y ejecutar index.html (archivo empaquetado), se informa un error. Después de verificar, está configurado en webpack.config.js:
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
Ejecútelo nuevamente para ver el efecto. 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
Configurar webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...
Configurar comandos en package.json
"start":"webpack-dev-server --hot --inline --progress --open"
Ejecute npm start y el navegador abrirá automáticamente la página. Después de cambiar el archivo, podrá ver la página actualizada en tiempo real.
Antes de usar el archivo .vue, primero debe instalar babel (convierta la sintaxis de es6 a 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
Cree un nuevo archivo .babelrc y configuración en el directorio raíz del proyecto:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Instale el cargador para procesar archivos .css, .vue
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
Configurar webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
Después de configurar y ejecutar, aparece un mensaje de error: No se puede encontrar el módulo 'vue-template-compiler' Instalar vue-template-compiler
cnpm install vue-template-compiler --save-dev
Modificar index.html:
<body>
<div id="main">
<app></app>
</div>
</body>
Cree un nuevo src/index.vue:
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>
Modificar main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
Después de guardar, ejecute npm start para ver el efecto. 
Modifique el código y vea el efecto modificado.
Primero instale vue-router:
npm install vue-router --save
Modificar main.js:
1. Introduzca la APLICACIÓN y aproximadamente dos componentes, importe el componente del enrutador e introduzca el subcomponente Niño.
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. Defina rutas: las rutas anidadas se almacenan con elementos secundarios: [] y los componentes secundarios están en el componente principal.
<router-view></router-view>
En la representación, la ruta define parámetros a través de "/:id", pasa los parámetros a través del enlace "/about/123" y obtiene los parámetros a través de {{$route.params.id}} en el componente.
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. Modifique el archivo 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. Después de modificar el componente principal about.vue, descubrí que solo puede haber una etiqueta HTML de nivel superior.
</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' }
]
Al acceder a /a, se saltará el componente correspondiente al valor /index.
Al escribir una aplicación de una sola página con vue.js, el paquete JavaScript empaquetado será muy grande, lo que afectará la carga de la página. Podemos utilizar la carga diferida del enrutamiento para optimizar este problema. Cambie la escritura de ruta a:
//定义路由
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' }})
Referencia: renderizado de vue-router: 
Instalar vuex
npm install vuex --save
Cree un nuevo archivo store.js:
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;
Inyectar tienda en main.js;
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
Cree un nuevo archivo count.vue y cree una nueva ruta que apunte al componente de conteo para hacer referencia al uso de vue-router. archivo count.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>
Representación: 
Debido al uso de un único árbol de estado, todo el estado de la aplicación se concentrará en un objeto relativamente grande. Cuando una aplicación se vuelve muy compleja, los objetos almacenados tienen el potencial de volverse bastante inflados. Para solucionar los problemas anteriores, Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio estado, mutación, acción y captador.
Crear nuevo moduleA.js, moduleB.js
Y modifique store.js:
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
Si desea acceder al estado de un componente, debe usarlo
$store.state.moduleA.count
$store.state.moduleB.Name
Representación: 
El método de modificación del estado en las mutaciones permanece sin cambios.
El componente es una de las características más poderosas de Vue.js. Los componentes pueden ampliar elementos HTML y encapsular código reutilizable. En un nivel alto, un componente es un elemento personalizado al que el compilador de Vue.js agrega una funcionalidad especial. En algunos casos, los componentes también pueden aparecer como elementos HTML nativos ampliados con el atributo is.
Cómo escribir el componente A:
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
Cómo escribir el componente 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>
En el componente principal, haga referencia y cuelgue respectivamente
<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>
Para la comunicación entre componentes padre-hijo simples o componentes hermanos que pertenecen al mismo componente padre, vue proporciona métodos. No es necesario utilizar vuex.
Componente principal:
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
Subcomponentes:
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
Componente principal:
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
Subcomponentes:
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
Representación: 
Representación: 
Archivo bus.js:
import Vue from 'vue'
export default new Vue()
El componente B $emit desencadena el evento:
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
El componente A$on acepta datos de entrega de eventos
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
Representación: 
npm instala koa koa-router --save-dev
Cree un nuevo archivo server/index.js index.js en el directorio raíz:
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')
});
Configure el comando en package.json: "server": "node server index.js" Inicie el servicio: npm run server Visite localhost/3000 en el navegador para ver el valor de retorno.
Utilice koa2-cors para configurar la instalación entre dominios 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'],
}));
...
Instalar axios:
npm install axios --save
Cree un nuevo server/request.js en el directorio raíz para encapsular una función de solicitud. Todas las solicitudes pasan por la función de solicitud para facilitar el procesamiento unificado de las solicitudes.
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" // Trae cookies al realizar solicitudes Las solicitudes de Axios de forma predeterminada no agregan cookies y deben configurarse (pit) Al configurar cookies con cookies al realizar la solicitud, el dominio cruzado permitido por El backend no se puede utilizar "* "Para explicar las representaciones de protocolo + nombre de dominio + datos de solicitud de puerto: representaciones
Instalación: npm i element-ui -S introducción:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
Uso: Configure css y el cargador de archivos antes de usarlos e instale style-loader y 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]'
}
}
Instalar:
cnpm install less less-loader --save-dev
usar:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. Parámetros de salto de ruta:
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. Utilice el editor de texto enriquecido: vue2-editor Instalación: cnpm install vue2-editor --save Uso: importar {VueEditor} desde 'vue2-editor'
Usando cross-env: Configure la instalación del entorno de desarrollo: comando de configuración 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"
Modificar la configuración del paquete web:
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
}),
]);
}
Obtenga las variables de entorno actuales en el programa a través de: process.env.NODE_ENV
