从零开始使用vue-cli搭建后端管理系统

1.所用技术：

vue2.0
vuex
vue-router
axios
ElementUI2.0
webpack
vue-loader
awesome-vue
less
mock

2.环境配置：

全局安装：

npm install -g vue-cli
npm install -g webpack

init一个vue项目：

npm init webpack my-vue-webDemos//一路enter

npm安装依赖包：

cd my-vue-webDemos
npm install 

启动/打包项目：

npm run dev//启动项目，若需修改vue项目接口，在config文件夹中的index.js中修改

npm run build//打包项目

3.单页面系统：
1）项目中使用Element-UI实现：

npm install element-ui --save-dev

注：安装element之前，可先安装loader模块

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
/*loader是webpack的大功能之一，通过不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理*/

引用element-ui：
main.js

//引入element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2）项目中使用less

npm install less less-loader --save-dev

在build的webpack.base.conf.js中添加下面代码：

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

3）使用mock.js

npm install mockjs --save-dev

4)使用axios

npm install axios --save-dev
//安装axios的模拟调试器
npm install axios-mock-adapter --save-dev

将axios-mock-adapter引入到项目中：

4.项目及各文件内容：

main.js