vue.js实战书籍笔记
添加小程序，兑换各种视频教程/数据资源。
0. Vue的定义：渐进式技术栈，足以应付任何规模的应用，包括比较高级的功能，如解耦视图和数据，可复用组件，前端路由，状态管理，虚拟DOM。Vue官网：https://cn.vuejs.org/v2/guide/。
1. MVVM模式：vue的使用模式MVVM，有MVC衍生而来。即V（view）视图层变化时，会自动更新到viewModel（视图模型），反之亦然，从而建立双向绑定。
2. Vue引入：
2.1 script加载CDN文件：
〈！一自动识别最新稳定版本的Vue . j s 一〉
12.6 $nextTick：页面渲染完才执行。
13. render：
13.1 render的createElement：
13.2 render的JSX：
new Vue({
el:"#app",
render(h){
return (
< span >一级
)
}
}) 14. webpack：在安装最新node和npm的前提下。
14.1 webpack基础配置：
步骤1：创建一个目录，如demo，npm init初始化。
在demo命令行下：npm init。生成一个package.json文件。
步骤2：本地安装webpack。
在demo命令行下：npm install webpack --save -dev。完成在package.json文件中配置devDependencies。
步骤3：接着需要安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等，配置起来也很简单。
在demo命令行下：npm install webpack-dev-server --save-dev。最终完善package.json文件配置。
步骤4： 在demo下创建webpack.config.js ，井初始化它的内容：
var config={
}
module.exports=config //如果支持es6，可以用es6语法。步骤5： 在package. json 的scripts 里增加一个快速启动webpack-dev-server 服务的脚本：
{
"scripts":{
"test":"echo \"Error: no test specified\"&& exit l ",
"dev"："webpack-dev-server--open--config webpack.config.js ", //默认端口是127.0.0.1 :8080
// "dev"："webpack-dev-server --host 172.172.172.1 --port 8888 --open--config webpack.config.js " //配置自定义端口
}
}步骤6：在demo下新建main.js文件作为入口的文件，然后在webpack.config. 中进行入口和输出的配置：
var path= require ('path'); //在下载path前提下引入path
var config ={
entry:{
main:"./main" //主入口文件main.js
},
output:{ //output 中path选项用来存放打包后文件的输出目录，是必填项。publicPath 指定资源件引用的目录，如果你的资源存放在CDN 上，这里可以填CDN 的网址。filename 用于指定输出文件的名称。因此，这里配置的output 意为打包后的文件会存储为demo/dist/main.js 文件，只要在html 中引入它就可以了。
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename :'main.js'
}
}
module.exports= config;步骤7：在demo下新建一个index.html 作为我们SPA 的入口：
< !DOCTYPE html>
webpack App
Hello World.
步骤8：在demo命令行下执行npm run dev启动vue项目,在浏览器中打开localhost:8080(这配置的端口ip)即可。
14.2 完善webpack高级配置：
配置加载器（loaders）
如css模块：
npm install css-loader --save-dev
npm install style-loader --save-dev
然后在webpack.config.js 文件里配置Loader，增加对.css 文件的处理：
var path= require ('path'); //在下载path前提下引入path
var config ={
entry:{
main:"./main" //主入口文件main.js
},
output:{
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename :'main.js'
},
modele:{
rules:[
{
test : /\.css$/,
use : [
'style-loader',
'css-loader'
]
}
]
}
}
module.exports= config;安装extract-text-webpack-plugin 插件：npm ins tall extrac t-text-webpack-plugin --save-dev。
然后然后在配置文件中导入插件，并改写loader 的配置：
var path= require ('path'); //在下载path前提下引入path
var ExtractTextPlugin =re quire ( 'extract-text-webpack-plugin '); //引入插件
var config ={
entry:{
main:"./main" //主入口文件main.js
},
output:{
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename :'main.js'
},
modele:{
rules:[
{
test : /\.css$/,
use : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins:[
new ExtractTextPlugin ("main.css") //重命名提取后的css 丈件
]
}
module.exports= config;在demo下创建style.css文件，在main.js引入style.css文件import ' ./lstyle css ';
使用.vue 文件需要先安装vue-loader 、vue-style-loader 等加载器并做配置。因为要使用ES6 语法，还需要安装babel 和bab 巳I-loader 等加载器。使用npm 逐个安装以下依赖：
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset- es2015
npm install --save-dev babel-runtime安装完成后， 修改配置文件webpack.config.js
var path= require ('path'); //在下载path前提下引入path
var ExtractTextPlugin =re quire ( 'extract-text-webpack-plugin '); //引入插件
var config ={
entry:{
main:"./main" //主入口文件main.js
},
output:{
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename :'main.js'
},
modele:{
rules:[
{
test : /\.css$/,
use : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.vue$/,
loader：'vue-1oader',
options : {
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:"vue-style-loader"
})
}
}
},
{
test : /\.js$/,
loader :'babel - loader ',
exclude : /node modules/
}
]
},
plugins:[
new ExtractTextPlugin ("main.css") //重命名提取后的css 丈件
]
}
module.exports= config;在demo下创建.babelrc文件，并写入babel 的配置， webpack 会依赖此配置文件来使用babel 编译ES6 代码：
{
"presets":["es2015"],
"plugins":["transform- runtime "],
"comments": false
}在demo下创建app.vue并写入：
Hello {{ name }}
在demo下main.js内容被替换成：
import Vue from 'vue';
import App from './app.vue';
new Vue({
el : '#app',
render: h => h(App)
})
最后 npm run dev 启动vue项目,在浏览器中打开localhost:8080（如果有重新配置，就打开重新配置的端口，没有就是这个默认端口）即可。
14.3 进一步完善webpack高级配置：来支持更多常用的功能，如安装url - loader 和file-loader 来支持图片、字体等文件。
下载：
npm install --save-dev url-loader
npm install --save-dev file-loader
在webpack.config . js配置：
var path= require ('path'); //在下载path前提下引入path
var ExtractTextPlugin =re quire ( 'extract-text-webpack-plugin '); //引入插件
var config ={
entry:{
main:"./main" //主入口文件main.js
},
output:{
path:path.join(_dirname,'./dist'),
publicPath:'/dist/',
filename :'main.js'
},
modele:{
rules:[
{
test : /\.css$/,
use : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.vue$/,
loader：'vue-1oader',
options : {
loaders:{
css:ExtractTextPlugin.extract({
use:'css-loader',
fallback:"vue-style-loader"
})
}
}
},
{
test : /\.js$/,
loader :'babel - loader ',
exclude : /node modules/
},
{
test :/\. (gif | jpg | png | woff |svg | eot | ttf)\??.*$/,
loader:'url-loader?limit=1024'
} //表示到.gif、.png 、．ttf 等格式文件时， url-loader 会把它们一起编译到dist 录下，“?limit=1024 ”是指如果这个文件小于lkb ，就以base64 的形式加载，不会生成一个文件。
]
},
plugins:[
new ExtractTextPlugin ("main.css") //重命名提取后的css 丈件
]
}
module.exports= config;打包会用到下面两个依赖，使用NPM 安装：
npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin
为了方便开发和生产环境的切换，我们在demo 目录下再新建一个用于生产环境的配置文件webpack.prod.config.j s 。
编译打包，直接执行webpack 命令就可以。在package .json 中， 再加入一个build 的快捷脚本用来打包：
{
"scripts":{
"test":"echo \"Error: no test specified\"&& exit l ",
"dev"："webpack-dev-server--open--config webpack.config.js ", //默认端口是127.0.0.1 :8080
// "dev"："webpack-dev-server --host 172.172.172.1 --port 8888 --open--config webpack.config.js ", //配置自定义端口
"build":"webpack --progress --hide-modules --config webpack.prop.config.js", //打包
}
}配置webpack.prod.config.js的代码：
var webpack =require ('webpack');
var HtmlwebpackPlugin = require ("html-webpack-plugin");
var ExtractTextPlugin = require ("extract-text-webpack-plugin");
var merge = require ("webpack-merge");
var webpackBaseConfig =require ('./webpack.config.js');
webpackBaseConfig .plugins = []; //清空基本配置的插件列表
module.exports = merge(webpackBaseConfig , {
output: {
publicPath : '/dist/',
filename：'[name].[hash].js'
}, //将入口文件重命名为带有20 位hash 值的唯一文件
plugins : [
new ExtractTextPlugin({
filename:'[name].[hash].css',
allChunks:true
}), //提取css ， 并重命名为带有20 位hash 值的唯一文件
new webpack.DefinePlugin({ //定义当前node 环境为生产环境
'process.env': {
NODE ENV:"production"
}
}) ,
new webpack.optimize.UglifyJsPlugin({ //压缩js
compress : {
warnings : false
}
}),
new HtmlwebpackPlugin({ //提取模板，并保存入口html 文件
filename:"../index_prod.html",
template:"./index.ejs",
inject : false
})
],
})最终在demo下运行npm run build打包：
15. vue中使用 vue-router插件：
npm下载插件：
npm install --save 插件(如iview/swiper/better-scroll)
全局(在main.js)使用插件：
import View from "view"
Vue.use(View)
15.1 vue-router 基本用法：
a. 配置路由。
npm install --save vue-router
在main.js中：
import Vue from 'vue';
import VueRouter from 'vue-router '
import App from './app.vue'
Vue.use(VueRouter) 最后配置路由：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router=new Router({
routes
})
const routes=[
{
path:"/other_login",
name:"other_login",
meta:{
title:"网页标题"
},
component:() => import('@/views/other_login.vue')
},
]
router.afterEach((to, from , next) => { //表示路由跳转后钩子函数
pass
})
router.beforeEach((to, from , next) => { //表示路由跳转前钩子函数，常用登陆权限处理
pass
})
export default routerb. 路由跳转：vue-router 有两种跳转页面的方法：
第一种：是使用内置的＜router-link tag="div" to="/login" replace＞组件。tag： 可以指定渲染成什么标签，如这里指定渲染成div而不是a标签。replace ：使用replace 不会留下History 记录，所以导航后不能用后退键返回上一个页面。this.$router.go(-1) ， -1表示后退一页，2表示前进2页，0表示刷新当前页。
16. vue中使用vuex状态管理：
npm install --save vuex
在main.js中：
import Vue from 'vue ;
import VueRouter from ' vue-router '
import Vuex from ' vuex ';
import App from './app.vue';
Vue.use(VueRouter) ;
Vue.use(Vuex) ;
const store = new Vuex . Store({ // vuex 的配置
state:{ //vuex的data变量，在组件内调用state的变量this.$store.state.count ;
count:0
},
mutations:{ //vuex的methods方法，在组件内调用mutations的方法this.$store.commit ('increment');
increment (state) {
state . count ++ ;
},
decrease (state) {
state.count --;
}
},
getters:{ //vuex的computed计算属性
filteredList : state => {
return state.list.filter(item => item < 10);
}
},
actions:{ //vuex的异步操作数据，在组件中this.$store.dispatch ('increment')触发。
increment ( context) {
context.commit ('increment');
}
},
modules:{ //模板组件的store
},
});
new Vue({
el :'#app',
router : router ,
store: store ,
render: h => {return h(App)}
})