最近在學習vue2.0 哩照，寫寫用vue做項目的構建過程
工欲善其事必先利其器
1. 環(huán)境配置
- node 環(huán)境
- vue install vue-cli
- vue init webpack my-project // 創(chuàng)建一個基于 webpack 模板的新項目
- cd my-project
- npm install
- npm run dev
2.安裝后生成的文件
app.vue
main.js //入口文件
components // 組件
build 目錄是一些webpack的文件斜纪，配置參數(shù)什么的饺蔑，一般不用動
src 源碼文件夾败砂，基本上文件都應該放在這里骨坑。
static 生成好的文件會放在這個目錄下锻全。
.babelrc babel編譯參數(shù)眯杏，vue開發(fā)需要babel編譯ES6語法
.editorconfig 看名字是編輯器配置文件开瞭，不曉得是哪款編輯器懒震，沒有使用過罩息。
.eslintrc.js eslint配置文件，用以規(guī)范團隊開發(fā)編碼規(guī)范挎狸，大中型項目很有用
.gitignore 用來過濾一些版本控制的文件扣汪，比如node_modules文件夾
index.html 主頁
package.json 項目文件，記載著一些命令和依賴還有簡要的項目描述信息
README.md 介紹自己這個項目的锨匆，想怎么寫怎么寫崭别。不會寫就參照github上star多的項目，看人家怎么寫的
3. 安裝依賴
- stylus // 用stylus寫樣式需安裝
- sass // 用sass寫樣式需安裝
- vue-router // 路由
- vuex // 數(shù)據(jù)管理
...
構建項目結構幾點建議
1恐锣、避免css沖突茅主，基本布局+組件式的寫法，組件統(tǒng)一加父級class
2土榴、多加注釋诀姚，你寫的代碼可能還需要給別人看的
3、變量和函數(shù)命令要簡潔明了風格統(tǒng)一玷禽，可以參考element UI組件的寫法
4赫段、代碼簡潔，一個函數(shù)不要寫的太長矢赁，注意拆分和封裝糯笙，一個組件不要太大，盡量拆分
5撩银、多熟悉數(shù)組的字符串操作给涕， 如 forEach filter map every some reduce splice indexOf
4. 項目結構構建好之后，寫路由
在 [main.js] 中引入vue-router
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router/index'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
linkActiveClass: 'active'
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount('#app')
創(chuàng)建路由路徑(src/router/index.js) 詳情見文檔 https://router.vuejs.org/zh-cn/essentials/getting-started.html
export default [
{path: '', component: resolve => require([''], resolve)}
]
可以在頁面上添加路由额获，**哪里需要路由轉換要寫 <router-view></router-view>**
5.寫頁面够庙，組件
6. vuex狀態(tài)管理(src/vuex) 【https://vuex.vuejs.org/zh-cn/】
- types 定義類型
- State 單一狀態(tài)樹 存儲數(shù)據(jù)
- Getters 從 store 中的 state 中派生出的一些狀態(tài)
- Mutations 提交mutations改變state數(shù)據(jù)狀態(tài)， **同步**提交
- Actions 通過提交的mutation**異步**改變state數(shù)據(jù)狀態(tài)
- store.js 入口文件抄邀，在根組件調用耘眨，然后所有子組件可以共享數(shù)據(jù)
好了，整個項目的構建過程就是醬紫境肾，對于vue項目熟練運用剔难，還是得多多看官方文檔，多做練習准夷。
操作數(shù)據(jù)
