最近在學習vue2.0 ，寫寫用vue做項目的構建過程
工欲善其事必先利其器
1. 環境配置
- node 環境
- vue install vue-cli
- vue init webpack my-project // 創建一個基于 webpack 模板的新項目
- cd my-project
- npm install
- npm run dev
2.安裝后生成的文件
app.vue
main.js //入口文件
components // 組件
build 目錄是一些webpack的文件，配置參數什么的，一般不用動
src 源碼文件夾，基本上文件都應該放在這里。
static 生成好的文件會放在這個目錄下。
.babelrc babel編譯參數，vue開發需要babel編譯ES6語法
.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。
.eslintrc.js eslint配置文件，用以規范團隊開發編碼規范，大中型項目很有用
.gitignore 用來過濾一些版本控制的文件，比如node_modules文件夾
index.html 主頁
package.json 項目文件，記載著一些命令和依賴還有簡要的項目描述信息
README.md 介紹自己這個項目的，想怎么寫怎么寫。不會寫就參照github上star多的項目，看人家怎么寫的
3. 安裝依賴
- stylus // 用stylus寫樣式需安裝
- sass // 用sass寫樣式需安裝
- vue-router // 路由
- vuex // 數據管理
...
構建項目結構幾點建議
1、避免css沖突，基本布局+組件式的寫法，組件統一加父級class
2、多加注釋，你寫的代碼可能還需要給別人看的
3、變量和函數命令要簡潔明了風格統一，可以參考element UI組件的寫法
4、代碼簡潔，一個函數不要寫的太長，注意拆分和封裝，一個組件不要太大，盡量拆分
5、多熟悉數組的字符串操作， 如 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')
創建路由路徑(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狀態管理(src/vuex) 【https://vuex.vuejs.org/zh-cn/】
- types 定義類型
- State 單一狀態樹 存儲數據
- Getters 從 store 中的 state 中派生出的一些狀態
- Mutations 提交mutations改變state數據狀態， **同步**提交
- Actions 通過提交的mutation**異步**改變state數據狀態
- store.js 入口文件，在根組件調用，然后所有子組件可以共享數據
好了，整個項目的構建過程就是醬紫，對于vue項目熟練運用，還是得多多看官方文檔，多做練習。
操作數據
