vuecli+element-ui+sass+axios的搭建

1.全局安装脚手架

npm install --global vue-cli

2.初始化一个脚手架项目

vue init webpack vuetest

3.选项配置：

Project name (vuetest) --回车跳过

Project description (A Vue.js project) --项目描述，也可直接点击回车

Author (........) -- 作者

Runtime + Compiler: recommended for most users --运行加编译

Install vue-router? (Y/n) --选Y，官方路由

Use ESLint to lint your code? (Y/n) --是否使用ESLint管理代码，新手可以用

Setup unit tests with Karma + Mocha? (Y/n) --我选Y

Setup e2e tests with Nightwatch(Y/n) --我选Y

5.下载vscode（
项目初始化好后，我们开始安装开发工具，我选用的是VScode ）

安装插件：ESLINT和Vetur

6.引入项目：打开文件夹-项目文件夹

 

7.引入sass

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install --save-dev node-sass sass-loader

如果出现异常： MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。

解决方法 ：npm install --global --production windows-build-tools （全局安装windows构建工具）

https://www.cnblogs.com/rainheader/p/6505366.html

8.引入完成之后： npm install

package.json会引入sass；

然后修改 webpack.base.config.js在loaders里面加上

9.引入element-Ui组件

npm install element-ui --save

修改配置： webpack.base.conf.js

添加：

{ test: /\\\\\\\\.css$/, loader: "style!css" }, { test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/, loader:"file" }

使用： 打开项目：src/main.js,添加下面三条

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

逻辑：

核心js 比如main.js 引入路由，组件，初始化一些公用数据。

 

10.引入morkjs模拟请求发送：

npm install mockjs --save-dev

 

11.引入axios发送http请求：

npm install axios --save