第一步
安装nodejs
工程级别的项目需求,一般是长期支持的稳定版本,
所以到官网选择LTS版本下载即可。
windows和mac可以傻瓜式安装,按照默认安装即可。
linux安装需编译,请根据不同linux发行版进行百度。
安装完成,通过 node -v
来查看当前node版本
注:以下命令有全局标志-g
,macos开发环境请自觉加上 sudo
前缀。例:sudo npm install -g webpack
安装全局webpack
npm install -g webpack
安装完成,通过webpack -v
来查看当前webpack版本
第二步
安装vue-cli脚手架工具
npm install -g vue-cli
第三步
通过vue-cli创建项目基础目录
vue init webpack 工程名字
<工程名字不能用中文>
之后会让你输入一串项目信息以及项目配置。按需输入即可。
第四步
安装依赖模块
cd 工程名字
npm install
给生产环境装的依赖
npm install vuex vue-router axios qs --save
- 安装vue运行依赖
1.vuex
2.vue-router
3.axios
4.qs
给开发环境安装的依赖
安装sass预编译环境
npm install node-sass sass-loader --save-dev
1.node-sass
2.sass-loader安装express环境以及跨域转发模块以及mock假数据模块
npm install express http body-parser superagent mockjs --save-dev
1.express
2.http
3.body-parser
4.superagent
5.mockjs
第五步
搭建项目目录
- 以下路径形式均为以项目根目录为开始
目录结构一般为了贴近工程需求,会用到mock假数据,跨域代理,sass预编译,组件状态管理,以及组件间状态传递等vue常用需求,下面就教大家纯手动搭建一个工程目录:
创建express服务文件
提供mock假数据以及跨域代理,如必要也可自行npm安装sql数据库进行连接,在此不做示例。
创建/server/app.js
文件加入如下代码,
1 | /****************************定义和引入********************************/ |
修改src源文件目录
为了提供组件间状态传递,为工程预留出更加清晰合理的目录,做出如下修改:
- 修改
/src/main.js
为如下代码,
1 | import Vue from 'vue' |
- 修改
/src/app.vue
为如下代码,
1 | <template> |
- 修改
/src/router/index.js
为如下代码,
1 | // 引入插件模块 |
- 创建
/src/containers/Index.vue
为如下代码,
1 | <template> |
- 创建
/src/stores/actions/index.js
为如下代码,
1 | // actions |
- 创建
/src/stores/mutations/index.js
为如下代码,
1 | // mutations |
- 创建
/src/stores/states/index.js
为如下代码,
1 | // states |
- 创建
/src/stores/index.js
为如下代码,
1 | import Vue from 'vue' |
运行项目
在bash中输入npm run dev
以上工程目录就搭建完毕了,后续components中尽量添加可复用的无状态组件,或者全局状态组件,比如alertbox之类,containers中为页面,至于ajax请求尽量用vuex ,action,去集成,尽量做成函数式编程的风格。这样可以尽可能的保证项目内部代码规整。
项目目录结构以及代码请移步至以下git中查看
https://github.com/shifeng1993/vue-start
喜欢这个脚手架的可以 star 和 fork 哦!