Vue创建一：创建项目及样式引入

一、基础创建

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;
}