【vue2.0实战分享】搭建vue运行环境以及项目目录

第一步

安装nodejs

工程级别的项目需求,一般是长期支持的稳定版本,
所以到官网选择LTS版本下载即可。

链接:https://nodejs.org/zh-cn/

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/****************************定义和引入********************************/
// 引入模块
var http = require('http');
var express = require('express');
var app = express();
var bodyParser = require("body-parser");
var superagent = require('superagent'); //http://visionmedia.github.io/superagent/#response-properties 文档地址
var server = http.Server(app);
var host = 'http://localhost:';
var port = 9999; //设置本地转发服务端口
var Mock = require('mockjs')

/*************************以下为设置和启用*****************************/
// 设置node服务
app.set('port', port);
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json());

// 启动服务
server.listen(app.get('port'), function () {
console.log("服务已经启动,APIhost:" + host + app.get('port'));
});

/******************以下为此服务支持跨域请求********************/
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS, PATCH');
// res.set({
// 'Content-Type': 'Content-Type:application/json; charset=UTF-8',
// })
if (req.method == 'OPTIONS') {
res.send(200);
} else {
next();
}
});

/******************以下是api公共部分,不用修改***********************/


// 设置后端服务器url
var dbUrl = 'http://localhost:8383'; //这里写你的后端api地址

// form 请求
var form = function (req, res, API, log) {
var sreq = superagent.post(dbUrl + API);
sreq.type('form')
sreq.send(req.body);
sreq.pipe(res);
sreq.on('end', function () {
console.log(log);
});
}

// json 请求
var json = function (req, res, API, log) {
var sreq = superagent.post(dbUrl + API);
sreq.type('json')
sreq.send(req.body);
sreq.pipe(res);
sreq.on('end', function () {
console.log(log);
});
}

/******************以下是api部分***********************/


// 代理转发部分


// form请求示例
app.get('/api/machine/init', function (req, res) {
var API = '/api/v2/machine/init'
var log = '初始化机器';
form(req, res, API, log)
});

// json请求示例
app.get('/api/machine/init', function (req, res) {
var API = '/api/v2/machine/init'
var log = '初始化机器';
json(req, res, API, log)
});


// mock假数据部分

// mock示例
app.get('/goods/size', function (req, res) {
var data = Mock.mock([{
"skuId": 4,
"skuSubject": "清湿茶",
"skuPackageType": "鹰牌",
}])
res.send(JSON.stringify(data))
console.log('goodssize')
})

修改src源文件目录

为了提供组件间状态传递,为工程预留出更加清晰合理的目录,做出如下修改:

  • 修改/src/main.js为如下代码,
1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './stores'

// 创建vue实例并渲染到app
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
  • 修改/src/app.vue为如下代码,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div id="app">
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'app'
}
</script>

<style lang="scss">
</style>
  • 修改/src/router/index.js为如下代码,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 引入插件模块
import VueRouter from 'vue-router'
import Vue from 'vue'

// 引入主页面
import Index from '../containers/Index.vue'

// 引入次级页面

// 启用插件
Vue.use(VueRouter)

// 配置
const routes = [
{
path: '/',
component: Index,
children: []
}
]

// 传入配置
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes // (缩写)相当于 routes: routes
})

export default router
  • 创建/src/containers/Index.vue为如下代码,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div id="container">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
}
},
components: {
}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#container {
height: 100%;
overflow: auto;
}
</style>
  • 创建/src/stores/actions/index.js为如下代码,
1
2
3
4
5
// actions
const actions = {
}

export default actions
  • 创建/src/stores/mutations/index.js为如下代码,
1
2
3
4
5
// mutations
const mutations = {
}

export default mutations
  • 创建/src/stores/states/index.js为如下代码,
1
2
3
4
5
// states
const states = {
}

export default states
  • 创建/src/stores/index.js为如下代码,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import Vue from 'vue'
import Vuex from 'vuex'
import States from './states'
import Mutations from './mutations'
import Actions from './actions'

Vue.use(Vuex)

// store中的全局变量,只在store中使用
// vuex实例 store

// vuex 模块
const index = {
state: States,
mutations: Mutations,
actions: Actions
}

const store = new Vuex.Store({
modules: {
index: index
}
})

export default store

运行项目

在bash中输入npm run dev

以上工程目录就搭建完毕了,后续components中尽量添加可复用的无状态组件,或者全局状态组件,比如alertbox之类,containers中为页面,至于ajax请求尽量用vuex ,action,去集成,尽量做成函数式编程的风格。这样可以尽可能的保证项目内部代码规整。

项目目录结构以及代码请移步至以下git中查看
https://github.com/shifeng1993/vue-start
喜欢这个脚手架的可以 star 和 fork 哦!