vue-cli 2.x安装搭建自己喜欢的开发环境

安装Vue-cli

npm install -g vue-cli

创建项目

// vue init  

   vue init webpack test
1. 显示项目名 
2. 显示作者
3. 是否安装路由
4. 是否安装语法检查工具
5. 是否安装测试工具
6. 是否安装e2e测试

使用Sass

// 安装Sass模块
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev   

// 配置sass
打开webpack.base.config.js 在 loaders加上 
{
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
}

// Vue文件使用


// 使用公共 scss
npm install sass-resources-loader --save-dev

// 修改 build 的 utils.js
scss: generateLoaders('sass')
改为:
scss: generateLoaders('sass').concat(
 {
   loader: 'sass-resources-loader',
   options: {
       //scss全局文件的路径
     resources: path.resolve(__dirname, '[path].scss')
   }
 }
)

配合es6的 async..await 统一管理API

• 构建统一API管理

  
  
  

  6%N6VQ`4KS%%AL}RB{)BU~8.png

• 引入文件

  
  
  

  image.png

• 使用API

  
  
  

  image.png

常用提示组件全局化

// 程序离不开提示,每一步预判或者与后台打交道都需要用到提示,放入全局或许是个不错的选择(哈哈哈) 使用可以看上面的图片

image.png