vue2 study
1.0.0
3. Installez le plugin webpack-html
4Installer la vue
5Installer la mise à jour à chaud de webpack-dev-server
6Installer Babel
7Installez vue-loader pour traiter les fichiers vue
8Utiliser le routage vue-router2
9.1Applications de base de vuex
9.2 Division d'État
10 Componentisation et transfert de valeur entre composants
11. Utilisez nodejs+koa2 pour fournir une interface d'arrière-plan
12. Configurez koa pour autoriser l'accès inter-domaines frontal
13 Utilisez axios pour accéder à l'interface 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 'vers/votre/chemin' npm init
Divisé en installation globale et installation intra-projet
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'
}
};
Exécutez la commande webpack sur la ligne de commande pour voir les fichiers compilés.
npm installe 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")
}),
...
]
Exécutez à nouveau la commande webpack et vous verrez un fichier index.html supplémentaire. Ce fichier est généré sur la base du modèle et introduit automatiquement le fichier js généré par le package. Exécutez le fichier index.html emballé pour voir l'effet.
npm install vue -save
Modifier main.js :
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
Modifier index.html :
<div id="main">
<h3>{{message}}</h3>
</div>
Lors de l'exécution du packaging webpack et de l'exécution de index.html (fichier packagé), une erreur est signalée. Après vérification, elle est configurée dans webpack.config.js :
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
Exécutez-le à nouveau pour voir l'effet 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
Configurer webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...
Configurer les commandes dans package.json
"start":"webpack-dev-server --hot --inline --progress --open"
Exécutez npm start et le navigateur ouvrira automatiquement la page après avoir modifié le fichier, vous pourrez voir la page mise à jour en temps réel.
Avant d'utiliser le fichier .vue, vous devez d'abord installer babel (convertir la syntaxe es6 en 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
Créez un nouveau fichier .babelrc et une configuration dans le répertoire racine du projet :
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Installer le chargeur pour traiter les fichiers .css, .vue
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
Configurer webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
Après la configuration et l'exécution, un message d'erreur apparaît : Impossible de trouver le module 'vue-template-compiler' Installer vue-template-compiler
cnpm install vue-template-compiler --save-dev
Modifier index.html :
<body>
<div id="main">
<app></app>
</div>
</body>
Créez un nouveau 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>
Modifier main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
Après avoir enregistré, exécutez npm start pour voir l'effet. 
Modifiez le code et voyez l'effet modifié.
Installez d'abord vue-router :
npm install vue-router --save
Modifier main.js :
1. Présentez l'application et environ deux composants, importez le composant routeur et introduisez le sous-composant Child.
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. Définir des itinéraires : les itinéraires imbriqués sont stockés avec children : [] et les composants enfants se trouvent dans le composant parent.
<router-view></router-view>
Lors du rendu, la route définit les paramètres via "/:id", transmet les paramètres via le lien "/about/123" et obtient les paramètres via {{$route.params.id}} dans le composant.
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. Modifiez le fichier 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. Après avoir modifié le composant parent about.vue, j'ai découvert qu'il ne peut y avoir qu'une seule balise HTML de niveau supérieur.
</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' }
]
Lors de l'accès à /a, le composant correspondant à la valeur /index sera sauté.
Lors de l'écriture d'une application d'une seule page avec vue.js, le package JavaScript fourni sera très volumineux, affectant le chargement des pages. Nous pouvons utiliser le chargement paresseux du routage pour optimiser ce problème. Changez l'écriture de l'itinéraire en :
//定义路由
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' }})
Référence : rendu vue-router : 
Installer vuex
npm install vuex --save
Créez un nouveau fichier 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;
Injecter le magasin dans main.js ;
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
Créez un nouveau fichier count.vue et créez une nouvelle route pointant vers le composant count pour faire référence à l'utilisation de vue-router. Fichier 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>
Rendu : 
Grâce à l’utilisation d’une seule arborescence d’états, tout l’état de l’application sera concentré dans un objet relativement volumineux. Lorsqu’une application devient très complexe, les objets du magasin peuvent devenir très volumineux. Afin de résoudre les problèmes ci-dessus, Vuex nous permet de diviser le magasin en modules. Chaque module a son propre état, mutation, action, getter
Créer un nouveau moduleA.js, moduleB.js
Et modifiez store.js :
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
Si vous souhaitez accéder à l'état d'un composant, vous devez l'utiliser
$store.state.moduleA.count
$store.state.moduleB.Name
Rendu : 
La méthode de modification de l’état des mutations reste inchangée.
Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML et encapsuler du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également apparaître comme des éléments HTML natifs étendus avec l'attribut is.
Comment écrire le composant A :
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
Comment écrire le composant 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>
Dans le composant parent, référencez et suspendez respectivement
<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>
Pour la communication entre des composants parent-enfant simples ou des composants frères appartenant au même composant parent, vue fournit des méthodes. Il n'est pas nécessaire d'utiliser vuex.
Composant parent :
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
Sous-composants :
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
Composant parent :
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
Sous-composants :
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
Rendu : 
Rendu : 
Fichier bus.js :
import Vue from 'vue'
export default new Vue()
Le composant B $emit déclenche l'événement :
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
Le composant A$on accepte les données de diffusion d'événements
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
Rendu : 
npm installer koa koa-router --save-dev
Créez un nouveau fichier server/index.js index.js dans le répertoire racine :
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')
});
Définissez la commande dans package.json : "server": "node server index.js" Démarrez le service : npm run server Visitez localhost/3000 dans le navigateur pour voir la valeur de retour.
Utilisez koa2-cors pour configurer l'installation inter-domaines 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'],
}));
...
Installez axios :
npm install axios --save
Créez un nouveau server/request.js dans le répertoire racine pour encapsuler une fonction de requête. Toutes les requêtes passent par la fonction de requête pour faciliter le traitement unifié des requêtes.
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" //Apportez des cookies lors des requêtes Les requêtes Axios par défaut n'ajoutent pas de cookies et doivent être définies (pit) Lors de la définition de cookies avec des cookies lors de la demande, le cross-domain autorisé par le le backend ne peut pas être utilisé "* "Pour expliquer les rendus des données du protocole + nom de domaine + demande de port : rendus
Installation : npm i element-ui -S introduction :
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
Utilisation : configurez CSS et le chargeur de fichiers avant de les utiliser et installez style-loader et 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]'
}
}
Installer:
cnpm install less less-loader --save-dev
utiliser:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. Paramètres de saut d'itinéraire :
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. Utilisez l'éditeur de texte enrichi : vue2-editor Installation : cnpm install vue2-editor --save Utilisation : import { VueEditor } from 'vue2-editor'
Utilisation de cross-env : configurez l'installation de l'environnement de développement : commande de configuration 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"
Modifier la configuration du 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
}),
]);
}
Obtenez les variables d'environnement actuelles dans le programme via : process.env.NODE_ENV
