《vue实战》笔记
npm 初始化配置
npm init
本地局部安装webpack
npm install webpack --save-dev
解释：--save-dev 会作为开发依赖来安装webpack
本地局部安装webpack-dev-server
npm install webpack-dev-server --save-dev
作用：提供在开发环境中提供很多服务，
比如启动一个服务器，热更新，接口代理等
注意：
Webpack 报错：The CLI moved into a separate package: webpack-cli
webpack4.0之后 命令行单独分出一个包，webpack-cli
原来的打包命令：webpack已经不能使用
解决方案如下：
需要先执行：npm install webpack-cli -D 或--save-dev
或指定版本下载
npm install webpack@2.3.2 --save-dev
npm install webpack-dev-server@2.4.2 --save-dev
创建webpack.config.js配置文件
var config = {
};
module.exports = config;
// 这里的moudle.exports = config;相当于export default config
// 由于目前还没有安装支持ES6的编译插件，因此不能直接使用ES6的语法，否则会报错。
配置快速启动
"dev": "webpack-dev-server --open --config webpack.config.js"
解释：指向读取的配置文件路径，还有可以配置ip和端口
配置入口和输出
入口：告诉webpack从哪里开始寻找依赖，并且编译
出口：则用来配置编译后的文件存储位置和文件名
var path = require('path');
var config = {
entry: {
main: './main' // webpack会从main.js文件开始工作
},
output: {
path: path.join(__dirname, './dist'), // 存放打包后文件的输出目录
publicPath: '/dist/', // 指定资源文件引用的目录，如果你的资源放在cdn上，可以填cdn的网址
filename: 'main.js' // 指定输出文件的名称
}
};
新建main.js入口文件
新建index.html作为SPA的入口
在此页面引用webpack输出文件main.js
配置css样式加载器Loaders
npm install css-loader --save-dev
npm install style-loader --save-dev
作用：当webpack编译过程中遇到require()或import语句导入一个后缀名为.css的文件时，
先将他通过css-loader转换，在通过style-loader转换，然后继续打包。
module: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
注意：版本问问题
(node:9192) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
卸载 npm uninstall --save-dev css-loader
重装 npm install css-loader@2.0.2 --save-dev
新建style.css
在main.js中引入
配置插件Plugins
作用：把散落在各地的css提取出来，并生成一个mian.css的文件，
最终在index.html里通过的形式加载它
var ExtractTextPlugin = require('extract-text-webpack-plugin');
npm install extract-text-webpack-plugin --save-dev
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
plugins: [
// 重命名提取后的css文件
new ExtractTextPlugin("main.css")
]
在index.html添加
配置vue需要用到的依赖
例如:
vue-loader可以对.vue格式的文件进行处理
babel,babel-loader处理ES6语法
npm install --save vue
npm install --save-dev vue-loader (15.7.0)
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 (@7.1.5)
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
配置：
{
test: /.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
新建.babelrc
{
// 预设--启动什么样的预设转码,设定转码规则( es2015 ,stage-0 ,stage-1 ,stage-2 , stage-3 ,react)
"presets": ["es2015"],
// 插件
"plugins": ["transform-runtime"],
// 在生成的文件中，不产生注释
"comments": false
}
新建app.vue
修改main.js
配置url-loader file-loader来支持图片，文字等文件
npm install --save-dev url-loader
npm install --save-dev file-loader
原理：
当遇到.gif .png .tytf 等格式文件时，url-loader会把他们一起编译到dist目录下，
"limit=1024"是指如果这个文件小于1kb,就以base64的形式加载，不会生成一个文件。
配置打包依赖
npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin
新建：webpack.prod.config.js
用于生产环境的配置文件
在package.json中加入build快捷脚本
配置v-router
npm iinstall --save vue-router
编辑---main.js
// 导入v-router
import VueRouter from 'vue-router';
// 加载router插件
Vue.use(VueRouter);
新建views目录，用于存放所有页面
新建views-->index.vue
views-->about.vue
main加入路由路径个对应的模块
const RouterConfig = {
// 使用 HTML5 的 History 路由模式
mode: 'history',
routes: Routers
};
设置mode为history会开启HTML5路由模式，通过'/'设置路径。
如果不配置mode,就会使用"#"来设置路径
const router = new VueRouter(RouterConfig);
// 创建Vue根实例
new Vue({
el: '#app',
router: router,
render: h => h(App)
})
修改package.json中dev脚本命令
添加--history-api-fallback
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
挂载路由组件
----app.vue
Routers添加属性
// （当访问的路径不存在时）重定向首页
{
path: '*',
redirect: '/index'
}
路由带参、跳转
this.$router {{$router.params}} 可以访问当前路由的信息
})
参数： {
to: 即将要进入的目标的路由对象
from: 当前导航即将要离开的路由对象
next: 调用该方法后，才能进入下一个钩子(参数设置为false,可以取消导航,设置为具体的路 径可以导航到指定的页面)
}
例子：
1.跳转之前，当前页滚动到顶端
router.afterEach((to, from, next)=> {
window.scrollTo(0, 0);
})
2.校验是否登录
router.beforeEach((to, from, next)=>{
if(window.localStorage.getItem('token')) {
next();
} else {
next('/login');
}
})
------------------
状态管理与Vuex
跨组件共享数据的需求；
配置vuex
npm install --save vuex
修改main.js
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
<!-- vuex的配置 -->
})
// 创建Vue根实例
new Vue({
el: '#app',
router: router,
store: store, // 使用vuex
render: h => h(App)
})
mutations和actions用法：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, n = 1) {
state.count += n;
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
vue页面使用：
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
handleActionIncrement() {
this.$store.dispatch('increment');
}
}
总结：actions主要是实现异步赋值操作（不做异步，也就没必要在actions中中转一次操作）
actions实现异步操作例子：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state, n = 1) {
state.count += 1；
}
},
actions: {
asyncIncrement (context) {
return new Promise (resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
},1000)
});
}
}
})
// index.vue代码
handleAsyncIncrement() {
this.$store.dispatch('asyncIncrement').then(() => {
console.log(this.$store.state.count); // 1
})
}
vuex使用modules分割模块
作用：将store分割不同的模块，项目足够大时，方便管理
实例：
const moduleA = {
state: {...},
mutations: {...},
actions: {...},
getters: {...}
}
const moduleB = {
state: {...},
mutatios: {...},
actions: {...}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // modulesA的状态
store.state.b // modulesB的状态
注意：module的mutation和getter接收的第一个参数state是当前模块的状态。
在actions和getters中，还可以接收一个参数rootState,来访问根节点的状态。
const moduleA = {
state: {
count: 0,
},
getters: {
sumCount (state, getters, rootSate){
return state.count + rootState.count;
}
}
}
中央事件总线插件vue-bus
作用：作为一个简单的组件传递事件，用于解决跨级和兄弟组件通信的问题。
新建vue-bus.js文件
const install = function(Vue) {
const Bus = new Vue({
methods: {
emit (event, ...args) {
this.$emit(event, ...args);
},
on (event, callback) {
this.$on(event, callback);
},
off (event, callback) {
this.$off(event, callback);
}
}
});
Vue.prototype.$bus = Bus;
};
export default install;
修改main.js
// 导入bus
import VueBus from './vue-bus';
// 加载bus
Vue.use(VueBus);
新建counter.vue
git语法
查看分支-- git branck -a
本地创建新的分支-- git branch zhihu
切换到新的分支-- git checkout zhihu
将新分支推送到github-- git push origin zhihu
删除本地分支-- git branch -d zhihu
删除github远程分支-- git push origin :zhihu
浙公网安备 33010602011771号