一、基礎創建

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

2、修改build/utils.js：

scss: generateLoaders(‘sass‘).concat(
      {
        loader: ‘sass-resources-loader‘,
        options: {
          resources: path.resolve(__dirname, ‘../src/assets/css/rem.scss‘)
        }
      }
    )

四、引入本地樣式

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

Vue創建一：創建項目及樣式引入