脚手架基础知识
安装及创建项目
vue cli官方文档 讲的很清楚
项目结构
目录结构
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
├── public
│ └── index.html
├── src
| ├── main.js # 项目的初始化
| ├── App.vue # 项目的入口组件
| ├── assest # 项目中展示的图片或者全局样式
| │ ├── css
| │ ├── img
| │ └── ...
| ├── api
| │ └── ... # 抽取出API请求
| ├── components
| │ └── ... # 项目中可复用的组件
| ├── view # 视图界面组件（我理解的是路由对应的组件
| │ └── ...
| ├── store
| | ├── index.js # 我们组装模块并导出 store 的地方
| | ├── actions.js # 根级别的 action
| | ├── mutations.js # 根级别的 mutation
| | └── ...
| ├── router
| | └── index.js # 项目的路由
| └── modules
| ├── xxx.js # 某一个模块
| └── ...
├── .gitignore # 存放提交git时需要忽略的文件
├── ... # 配置文件
Vue单文件组件结构
官方介绍
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \\
- 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
个人认为这也是一种组件化编程，每一个模块只负责那个模块的部分，关注点分离，编程效率更高，代码可读性更强。
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
<template>
<!-- 要渲染的标签 -->
</template>
<script>
/*引入需要用的包*/
import xxx from '@/api/...'
/*抛出组件*/
export default {
data(){
return {
xxx: '',
}
},
computed:{
xxx(){
return xxx;
},
},
...
}
</script>
<style>
/*样式*/
</style>
路由
Vuex
移步官方vuex文档
起步
项目目录详细介绍
main.js
放置公共组件：样式库、Vue、Router、Store等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/layout.css'
Vue.config.productionTip = true;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
store,
router
}).$mount('#app')
App.vue
根组件，main.js加载完毕后渲染的第一个组件，一般在这个组件渲染完毕后会通过路由跳转至其他页面组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div id="app" style="height:100%;background:#EEF2F5;">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
...
},
...
}
</script>
router
页面跳转的逻辑都是以这个文件为标准进行的
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
30
31
32
33
34
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: '/',
name: 'home',
component: () => import('../view/Home'),
redirect: '/page1',
children: [{
path: '/page1',
name: 'page1',
component: () => import('../view/page1')
},
...
]
},
{
path: '/login',
name: 'login',
component: () => import('@/view/Login')
},
...
],
mode: 'history'
})
router.beforeEach((to, from, next) => {
...
})
export default router;
store
store一般存的是用户登录的状态及一些缓存的数据，不是一味的将所有组件的状态都塞进去。
ps：一般大型的项目会将vuex的State、Mutations、Actions、Getters、Modules单独放置文件夹，这里就不介绍那么多。
store/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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
const state = {
param1: '',
param2: '',
}
const getters = {
AddParam12: (state,) => {
return state.param1+' '+state.param2;
}
}
const mutations = {
changeParam1(state){
state.params = 1;
},
changeParam2(state, changeValue){
state.params = cahngeValue;
},
}
const actions = {
changeParam1({commit}){
setTimeout(()=>{
commit('changeParam1')
}, 1000)
}
}
const options = {
state,
getters,
mutations,
actions,
}
const store = new Vuex.Store(options);
export default store;
view和component
按我的理解：
view 文件夹下放置所有的界面层组件（就是通过路由跳转的组件）
component 文件夹下放置一些可复用的组件
其他文件夹
一般还有：
api，里面有二次封装的axios/request/ajax接口请求。
assets，里面是一些全局的css文件、图片等。
还有根据项目需求而创建的文件夹….