（1）配置vue init webpack demoTest（后面的信息，若不是项目需要指定，可以直接默认回车确认）（可以在自己指定路径也可以直接装在默认c盘）
eui_vue.png
（2）新建好后，出现的文件夹项目
eui_vue2.png
（3）运行项目npm run start
eui_vue3.png
（4）运行项目，可能会出现这个报错bug（因为是vue项目里设置elist规范(若换行定格不规范就会报错，其实不大影响，只是规范方面报错，为了规范你写法），若需要去除掉这个提示规范，解决方法：
在config/index.js里配置信息useEslint设置为true
eui_vue4.png
（5）（如果需要打包项目）运行npm run build (打包后项目出现以下的文件夹)
eui_vue5.png
(6）项目文件放置（只是个人这样设置，方便开发）：
eui_vue6.png
（7）项目开发--用什么配置什么
1）引入重置css文件样式
在mainjs引入重置样式（重置样式文件放置在assets文件里）
eui_vue7.png
2）element.ui安装与配置
先配置插件npm install element-ui --save-dev
eui_vue8.png
在main.js文件中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
e.png
3）less安装与配置
npm install less less-loader --save-dev
eui_vue9.png
在webpack.base.conf.js里面配置：
eui_vue10.png
4）axios安装与配置
eui_vue11.png
第一种方式：引入全局使用
eui_vue12.png
第二种方式：封装axios文件后设置使用
在需要用到这请求的组件里面引入
eui_vue13.png
5）安装与配置json-server（后台暂时没接口过来，可以虚拟一个本地服务器），也可以结合postman接口测试来使用
全局安装
eui_vue14.png
cd到对应目录，然后再局部安装
eui_vue15.png
db.json模板（在项目里面新建的json文件）
eui_vue16.png
在package.json里面输入script脚本命令行mock(mock这名字随意可以改)
"mock":“json-server db.json --port 8080”
eui_vue17.png
运行npm run mock
eui_vue18.png
eui_vue19.png
安装后配置信息和配置代理
在webpack.dev文件里
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use('/api', apiRouter)
apiServer.listen(8081, () => {
console.log('JSON Server is running')
})
在config/index.js文件里配置
proxyTable: {
'/api':'http://localhost:8081/', //通过本地服务器将你的请求转发到这个地址
changeOrigin:true,//设置这个参数可以避免跨域
},
结合axios使用：
eui_vue20.png
（8）基础布局
1）根组件app.vue，路由挂载
eui_vue21.png
2)home.vue组件：
eui_vue22.png
3）head.vue头部组件
eui_vue23.png
效果图
eui_vue24.png
4）menu左菜单
eui_vue25.png
路由设置
eui_vue26.png
效果图
eui_vue27.png
…基本的固定布局搭好
（9）用git，上传代码到分支
1)git add .
2)git commit -m ""
3)git checkout 分支名称(切换到分支)（若查看分支 git branch）
4）git pull origin 分支名称（如果是主干，一般git pull就可以）
5）git push origin 分支名称（如果是主干，则是master）
这是本人搭建一个demo起步，然后可以在搭建好的项目基础上往下开发了；记录项目起步的准备与部分流程，为了方便自己日后查看，同时分享给大家，若写的有不好或有错误，请大神体谅与纠正，谢谢大家的阅读。
demo源码（github地址）：https://github.com/lilyping/elementUi_vue_demo
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
网友评论