vue2 study
1.0.0
3. Installieren Sie das Webpack-HTML-Plugin
4Installieren Sie vue
5Installieren Sie das Webpack-Dev-Server-Hot-Update
6Installieren Sie babel
7Installieren Sie den Vue-Loader, um Vue-Dateien zu verarbeiten
8Verwenden Sie das Routing vue-router2
9.1Grundlegende Anwendungen von vuex
9.2Staatsspaltung
10 Komponentisierung und Wertübertragung zwischen Komponenten
11. Verwenden Sie nodejs+koa2, um eine Hintergrundschnittstelle bereitzustellen
12. Stellen Sie Koa ein, um den domänenübergreifenden Front-End-Zugriff zu ermöglichen
13 Verwenden Sie axios, um auf die Backend-Schnittstelle zuzugreifen
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 'to/your/path' npm init
Unterteilt in globale Installation und projektinterne Installation
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'
}
};
Führen Sie den Befehl webpack in der Befehlszeile aus, um die kompilierten Dateien anzuzeigen.
npm install 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")
}),
...
]
Führen Sie den Webpack-Befehl erneut aus und Sie sehen eine zusätzliche Datei index.html, die auf der Vorlage basiert und automatisch die vom Paket generierte js-Datei einführt, um den Effekt zu sehen.
npm install vue -save
Ändern Sie main.js:
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
Ändern Sie index.html:
<div id="main">
<h3>{{message}}</h3>
</div>
Beim Ausführen des Webpack-Packagings und beim Ausführen von index.html (gepackte Datei) wird ein Fehler gemeldet. Nach der Überprüfung ist es in webpack.config.js konfiguriert:
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
Führen Sie es erneut aus, um den Effekt zu sehen 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
Konfigurieren Sie webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...
Konfigurieren Sie Befehle in package.json
"start":"webpack-dev-server --hot --inline --progress --open"
Führen Sie npm start aus und der Browser öffnet die Seite automatisch. Nach dem Ändern der Datei können Sie die aktualisierte Seite in Echtzeit sehen.
Bevor Sie die .vue-Datei verwenden, müssen Sie zunächst babel installieren (es6-Syntax in es5 konvertieren).
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
Erstellen Sie eine neue .babelrc-Datei und Konfiguration im Projektstammverzeichnis:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Installieren Sie den Loader, um .css- und .vue-Dateien zu verarbeiten
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
Konfigurieren Sie webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
Nach der Konfiguration und Ausführung erscheint eine Fehlermeldung: Modul „vue-template-compiler“ kann nicht gefunden werden. Installieren Sie vue-template-compiler
cnpm install vue-template-compiler --save-dev
Ändern Sie index.html:
<body>
<div id="main">
<app></app>
</div>
</body>
Erstellen Sie eine neue 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>
Ändern Sie main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
Führen Sie nach dem Speichern npm start aus, um den Effekt zu sehen. 
Ändern Sie den Code und sehen Sie sich den geänderten Effekt an.
Installieren Sie zuerst den Vue-Router:
npm install vue-router --save
Ändern Sie main.js:
1. Stellen Sie die APP und etwa zwei Komponenten vor, importieren Sie die Router-Komponente und führen Sie die Unterkomponente Child ein.
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. Routen definieren: Verschachtelte Routen werden mit untergeordneten Komponenten gespeichert:[], und untergeordnete Komponenten befinden sich in der übergeordneten Komponente.
<router-view></router-view>
Beim Rendern definiert die Route Parameter über „/:id“, leitet die Parameter über den Link „/about/123“ weiter und ruft die Parameter über {{$route.params.id}} in der Komponente ab.
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. Ändern Sie die Datei 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. Nachdem ich die übergeordnete Komponente about.vue geändert hatte, stellte ich fest, dass es nur ein HTML-Tag der obersten Ebene geben kann.
</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' }
]
Beim Zugriff auf /a wird die dem Wert /index entsprechende Komponente übersprungen.
Beim Schreiben einer Single-Page-Anwendung mit vue.js ist das gepackte JavaScript-Paket sehr groß, was sich auf das Laden der Seite auswirkt. Wir können das verzögerte Laden des Routings verwenden, um dieses Problem zu optimieren. Ändern Sie die Routenbeschreibung in:
//定义路由
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' }})
Referenz: Vue-Router-Rendering: 
Installieren Sie vuex
npm install vuex --save
Erstellen Sie eine neue store.js-Datei:
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;
Speicher in main.js einfügen;
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
Erstellen Sie eine neue count.vue-Datei und eine neue Route, die auf die Count-Komponente verweist, um auf die Verwendung von vue-router zu verweisen. count.vue-Datei:
<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>
Darstellung: 
Durch die Verwendung eines einzelnen Statusbaums wird der gesamte Status der Anwendung in einem relativ großen Objekt konzentriert. Wenn eine Anwendung sehr komplex wird, besteht die Gefahr, dass Speicherobjekte ziemlich aufgebläht werden. Um die oben genannten Probleme zu lösen, ermöglicht uns Vuex, den Store in Module aufzuteilen. Jedes Modul hat seinen eigenen Zustand, seine eigene Mutation, seine eigene Aktion und seinen eigenen Getter
Erstellen Sie neue moduleA.js, moduleB.js
Und ändern Sie store.js:
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
Wenn Sie auf den Status einer Komponente zugreifen möchten, müssen Sie diese verwenden
$store.state.moduleA.count
$store.state.moduleB.Name
Darstellung: 
Die Methode zur Zustandsänderung bei Mutationen bleibt unverändert.
Component ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. In manchen Fällen können Komponenten auch als native HTML-Elemente erscheinen, die um das Attribut is erweitert wurden.
So schreiben Sie Komponente A:
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
So schreiben Sie Komponente 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>
In der übergeordneten Komponentenkomponente jeweils referenzieren und einhängen
<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>
Für die Kommunikation zwischen einfachen übergeordneten und untergeordneten Komponenten oder Geschwisterkomponenten, die zur gleichen übergeordneten Komponente gehören, stellt vue Methoden bereit. Es ist nicht erforderlich, vuex zu verwenden.
Übergeordnete Komponente:
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
Unterkomponenten:
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
Übergeordnete Komponente:
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
Unterkomponenten:
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
Darstellung: 
Darstellung: 
bus.js-Datei:
import Vue from 'vue'
export default new Vue()
Komponente B $emit löst das Ereignis aus:
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
Komponente A$on akzeptiert Ereigniszustellungsdaten
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
Darstellung: 
npm install koa koa-router --save-dev
Erstellen Sie eine neue server/index.js-Datei index.js im Stammverzeichnis:
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')
});
Legen Sie den Befehl in package.json fest: „server“: „node server index.js“ Starten Sie den Dienst: npm run server Besuchen Sie localhost/3000 im Browser, um den Rückgabewert anzuzeigen.
Verwenden Sie koa2-cors, um eine domänenübergreifende Installation einzurichten: 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'],
}));
...
Axios installieren:
npm install axios --save
Erstellen Sie eine neue server/request.js im Stammverzeichnis, um eine Anforderungsfunktion zu kapseln. Alle Anforderungen durchlaufen die Anforderungsfunktion, um eine einheitliche Verarbeitung von Anforderungen zu ermöglichen.
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" //Cookies bei Anfragen mitbringen Axios-Anfragen fügen standardmäßig keine Cookies hinzu und müssen festgelegt werden (Pit) Beim Setzen von Cookies mit Cookies bei Anfragen wird die domänenübergreifende Verwendung durch die erlaubt Backend kann nicht verwendet werden "* "Zur Erläuterung der Protokoll-, Domänennamen- und Portanforderungsdatendarstellungen: Darstellungen
Installation: npm i element-ui -S Einführung:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
Verwendung: Konfigurieren Sie CSS und File Loader vor der Verwendung und installieren Sie Style-Loader und 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]'
}
}
Installieren:
cnpm install less less-loader --save-dev
verwenden:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. Routensprungparameter:
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. Rich-Text-Editor verwenden: vue2-editor Installation: cnpm install vue2-editor --save Verwendung: import { VueEditor } from 'vue2-editor'
Verwenden von Cross-Env: Richten Sie die Installation der Entwicklungsumgebung ein: cnpm install cross-env --save-dev Konfigurationsbefehl:
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --open",
"build":"cross-env NODE_ENV=production webpack"
Webpack-Konfiguration ändern:
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
}),
]);
}
Rufen Sie die aktuellen Umgebungsvariablen im Programm ab über:process.env.NODE_ENV
