vue2 study
1.0.0
3. Установите webpack-html-плагин.
4Установите VUE
5. Установите горячее обновление webpack-dev-server.
6Установка Бабель
7. Установите vue-loader для обработки файлов vue.
8Используйте маршрутизацию vue-router2
9.1Основные приложения vuex
9.2 Государственный раскол
10 Компонентизация и перенос значений между компонентами
11. Используйте nodejs+koa2 для предоставления фонового интерфейса.
12. Установите koa, чтобы разрешить внешний междоменный доступ.
13. Используйте axios для доступа к внутреннему интерфейсу
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
Разделяется на глобальную установку и внутрипроектную установку.
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'
}
};
Выполните команду webpack в командной строке, чтобы просмотреть скомпилированные файлы.
npm установить 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")
}),
...
]
Выполните команду webpack еще раз, и вы увидите дополнительный файл index.html. Этот файл создается на основе шаблона и автоматически представляет файл js, созданный пакетом. Запустите упакованный файл index.html, чтобы увидеть эффект.
npm install vue -save
Измените main.js:
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
Измените index.html:
<div id="main">
<h3>{{message}}</h3>
</div>
При выполнении упаковки веб-пакета и запуске index.html (упакованного файла) выдается сообщение об ошибке. После проверки настраивается в webpack.config.js:
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
Запустите его еще раз, чтобы увидеть эффект 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
Настройте webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...
Настройте команды в package.json
"start":"webpack-dev-server --hot --inline --progress --open"
Выполните npm start, и браузер автоматически откроет страницу. После изменения файла вы увидите обновленную страницу в режиме реального времени.
Перед использованием файла .vue необходимо сначала установить Babel (преобразовать синтаксис es6 в 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
Создайте новый файл .babelrc и конфигурацию в корневом каталоге проекта:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Установите загрузчик для обработки файлов .css, .vue.
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
Настройте webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
После настройки и запуска появляется сообщение об ошибке: Невозможно найти модуль «vue-template-compiler». Установите vue-template-compiler.
cnpm install vue-template-compiler --save-dev
Измените index.html:
<body>
<div id="main">
<app></app>
</div>
</body>
Создайте новый 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>
Изменить main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
После сохранения запустите npm start, чтобы увидеть эффект. 
Измените код и увидите измененный эффект.
Сначала установите vue-router:
npm install vue-router --save
Измените main.js:
1. Представьте приложение и около двух компонентов, импортируйте компонент маршрутизатора и добавьте подкомпонент 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. Определите маршруты. Вложенные маршруты хранятся в дочерних компонентах:[], а дочерние компоненты находятся в родительском компоненте.
<router-view></router-view>
При рендеринге маршрут определяет параметры через "/:id", передает параметры через ссылку "/about/123" и получает параметры через {{$route.params.id}} в компоненте.
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. Измените файл 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. После изменения родительского компонента about.vue я обнаружил, что может быть только один HTML-тег верхнего уровня.
</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' }
]
При доступе к /a будет пропущен компонент, соответствующий значению /index.
При написании одностраничного приложения с помощью vue.js упакованный пакет JavaScript будет очень большим, что повлияет на загрузку страницы. Чтобы оптимизировать эту проблему, мы можем использовать отложенную загрузку маршрутизации. Измените запись маршрута на:
//定义路由
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' }})
Ссылка: рендеринг vue-router: 
Установить Вуекс
npm install vuex --save
Создайте новый файл 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;
Внедрить хранилище в main.js;
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
Создайте новый файл count.vue и создайте новый маршрут, указывающий на компонент count, чтобы ссылаться на использование vue-router. файл 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>
Рендеринг: 
За счет использования единого дерева состояний все состояние приложения будет сосредоточено в относительно большом объекте. Когда приложение становится очень сложным, объекты хранилища могут сильно раздуться. Чтобы решить вышеуказанные проблемы, Vuex позволяет разделить хранилище на модули. Каждый модуль имеет свое состояние, мутацию, действие, геттер.
Создайте новый модульA.js, модульB.js.
И измените store.js:
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
Если вы хотите получить доступ к состоянию компонента, вам нужно использовать его.
$store.state.moduleA.count
$store.state.moduleB.Name
Рендеринг: 
Метод изменения состояния при мутациях остается неизменным.
Компонент — одна из самых мощных функций Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать повторно используемый код. На высоком уровне компонент — это пользовательский элемент, к которому компилятор Vue.js добавляет специальные функции. В некоторых случаях компоненты могут также отображаться как собственные элементы HTML, расширенные атрибутом is.
Как написать компонент А:
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
Как написать компонент Б:
<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>
В родительском компоненте компонента соответственно ссылка и висит
<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>
Для связи между простыми родительско-дочерними компонентами или родственными компонентами, принадлежащими одному и тому же родительскому компоненту, vue предоставляет методы. Нет необходимости использовать vuex.
Родительский компонент:
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
Подкомпоненты:
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
Родительский компонент:
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
Подкомпоненты:
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
Рендеринг: 
Рендеринг: 
файл bus.js:
import Vue from 'vue'
export default new Vue()
Компонент B $emit запускает событие:
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
Компонент A$on принимает данные о доставке событий.
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
Рендеринг: 
npm установить коа koa-router --save-dev
Создайте новый файл server/index.js index.js в корневом каталоге:
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')
});
Задайте команду в package.json: "server":"node server index.js" Запустите службу: npm run server. Посетите localhost/3000 в браузере, чтобы увидеть возвращаемое значение.
Используйте koa2-cors для настройки междоменной установки 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'],
}));
...
Установите аксиомы:
npm install axios --save
Создайте новый файл server/request.js в корневом каталоге, чтобы инкапсулировать функцию запроса. Все запросы проходят через функцию запроса, чтобы упростить унифицированную обработку запросов.
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" //Перенос файлов cookie при отправке запросов Запросы Axios по умолчанию не добавляют файлы cookie, и их необходимо установить (pit) При установке файлов cookie с помощью файлов cookie при запросе междоменный доступ, разрешенный бэкэнд не может быть использован "* "Чтобы объяснить протокол + имя домена + рендеринг данных запроса порта: рендеринг
Установка: npm i element-ui -S введение:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
Использование: Настройте CSS и загрузчик файлов перед использованием и установите загрузчик стилей и загрузчик CSS.
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]'
}
}
Установить:
cnpm install less less-loader --save-dev
использовать:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. Параметры перехода по маршруту:
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. Используйте редактор форматированного текста: vue2-editor Установка: cnpm install vue2-editor --save Использование: import { VueEditor } из 'vue2-editor'
Использование перекрестного окружения: Настройте установку среды разработки: команда конфигурации 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"
Измените конфигурацию веб-пакета:
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
}),
]);
}
Получите текущие переменные среды в программе через:process.env.NODE_ENV
