webpack
路径别名,@ 等价于 /src 这个目录1
import Hello from '@/components/Hello'
vue-cli 3.0配置webpack
vue-cli提供的是3.0.0-beta.6版本,简化成使用vue.config.js来配置项目
在根目录新建vue.config.js1
2
3
4
5
6
7
8
9
10
11const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
lintOnSave: true,
chainWebpack: (config)=>{
config.resolve.alias
.set('@$', resolve('src'))
}
}
1 | // vue.config.js 配置说明 |
组件封装
import默认会找该目录下index.js的文件,新增一个组件可以创建一个目录name,在里面创建index.js
导入使用如下代码:1
import './name'
生命周期
钩子:
常用如下:1
2
3
4Created:vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);
beforeCreate:给个loading界面 created撤销loading;
beforeDestory:你确认删除XX吗?
destoryed:当前组件已被删除,清空相关内容
vue组件的声明周期
scss
npm install node-sass –save-dev
npm install sass-loader –save-dev