一、基础创建
1、首先安装vue-cli
npm install -g vue-cli
2、创建一个使用webpack模板的项目
vue init webpack my-project
3、进入目录
cd my-project
4、安装依赖
npm install
5、启动vue项目
npm run dev
二、项目中安装和引入sass
npm install node-sass --save
npm install stylus-loader --save
三、全局引入sass文件
scss文件中定义了常量函数等,避免.vue文件每次都@import引入
1、添加依赖:
npm install sass-resources-loader --save-dev
npm install sass-loader --save
2、修改build/utils.js:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/rem.scss')
}
}
)
3、vue文件中设置
<style lang="scss" scoped> .title{ font-size:$font14; } </style>
四、引入本地样式
main.js
import 'css/reset.css'
import 'css/iconfont/iconfont.css'
css路径需要在build/webpack.base.conf.js中设置
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'css':resolve('src/assets/css')
}
},
五、main.js中执行全局函数
resize();
window.onresize = function(){
resize()
};
function resize(){
var htmlW = document.documentElement.clientWidth||document.body.clientWidth;
if(htmlW>767){
htmlW = 768;
}
document.documentElement.style.fontSize = htmlW/10+'px';
}
六、样式穿透
css穿透使用 >>>
.form-item >>> .el-input__inner{ height: 36px; line-height: 36px; }
sass穿透 /deep/
.form-item /deep/ .el-input__inner{ height: 36px; line-height: 36px; }