Vue项目搭建步骤

一. vue-cli初始化
1. 全局安装 vue-cli
  npm install --global vue-cli
2. 创建一个基于 webpack 模板的新项目
  vue init webpack my-project
3. 安装依赖
  cd my-project
  npm install (换源安装: npm install --registry https://registry.npm.taobao.org )
  npm run dev


二. 安装额外的依赖包
1. 两种依赖包的安装方式
  1.1 项目依赖包
  npm install --save vue
  1.2 开发依赖包
  npm install --save-dev webpack
2. less依赖包
  npm install --save-dev less less-loader
3. 网络请求axios依赖包
  npm install --save axios
4. axios低版本浏览器补丁es6-promise依赖包
  npm install --save es6-promise
5. 路由安装
  npm install --save vue-router
6. 状态管理安装
  npm install --save vuex
7. PC端组件库
  npm install --save element-ui
8. 移动端组件库
  npm install --save mint-ui
9. 上传服务器ssh2
  npm install –save-dev ssh2
10. cookie封装库
  npm install --save js-cookie

三. 其他修改
3.1 开发环境的端口修改
修改/config/index.js


3.2 打包静态文件夹名称修改
修改/config/index.js


3.3 index.html文件自动注入代码压缩配置
修改/build/wepack.prod.config.js


3.4 .vue文件严格模式配置
修改/build/wepack.base.config.js

 

四. 参考链接
vue-cli安装: https://cn.vuejs.org/v2/guide/installation.html
npm换源: http://www.jianshu.com/p/0deb70e6f395
webpack配置: https://webpack.js.org/configuration/
axios文档: https://github.com/mzabriskie/axios
vue-router文档: https://router.vuejs.org/zh-cn/
vuex文档: https://vuex.vuejs.org/zh-cn/
element-ui文档: http://element.eleme.io/#/zh-CN/component/quickstart
mint-ui文档: http://mint-ui.github.io/docs/#!/zh-cn2
ssh2文档: https://github.com/mscdex/ssh2
ssh2方法封装: http://blog.csdn.net/llmys/article/details/52860816?locationNum=2&fps=1
js-cookie文档: https://github.com/js-cookie/js-cookie

 

参考至  http://blog.csdn.net/echo008/article/details/77099058

posted @ 2017-12-18 22:18  doctype  阅读(1024)  评论(0编辑  收藏  举报