上篇說到開發(fā)開始之前稠通。
需求已經(jīng)有了买猖，具體的框架工具庫已經(jīng)搭建完畢滋尉，后續(xù)要擴展再議。
然后就應(yīng)該是跟著需求開發(fā)了高诺。
開發(fā)之前說了些基本要求碾篡。
第三篇內(nèi)容關(guān)于使用的一些環(huán)境，工具有什么用
了解環(huán)境牡拇，了解工具的最好辦法就是去對應(yīng)的官網(wǎng)讀導(dǎo)航穆律；
然后獲取別人的總結(jié)以便于快速了解；最后寫出自己的總結(jié)剔蹋。
最重要的一點辅髓，最消耗時間的一點，練習(xí)練習(xí)再練習(xí)洛口。
官方鏈接集合
-
nodejs en
nodejs cn
服務(wù)運行環(huán)境绍弟；提供本地服務(wù)器；文件操作樟遣；文件管理的環(huán)境豹悬。 -
npm
包管理器；為模塊提供便捷的下載以及依賴管理脱篙。 -
vue
官方倉庫
前端框架；加快開發(fā)效率绊困；提供數(shù)據(jù)綁定秤朗；配套路由vue-router，狀態(tài)管理vuex -
git
版本管理工具取视；幫助我們對開發(fā)的每個版本進行記錄 -
Webpack
前端打包工具作谭，整合所有的文件；可兼職自動化工具折欠，替代所有能夠替代的手動操作锐秦。 -
element-UI
UI組件。已經(jīng)封裝好的視圖赡艰，即開即用斤葱；好處：快速方便省心；壞處：靈個性化定制不便揍堕。 -
Mockjs
數(shù)據(jù)接口測試衩茸，提供模擬數(shù)據(jù) -
axios
提供封裝的ajax
vue-cli 最便捷的開始方式
官方提供的自動化工具，即開即用幔烛。
npm install -g @vue/cli
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴囊蓝，走你
$ cd my-project
$ npm run dev
捕獲.PNG
熟悉項目目錄
捕獲1.PNG
運用 vue-cli 工具創(chuàng)建項目之后會自動安裝依賴環(huán)境聚霜。
目錄詳情如下：
- .vscode
編輯器配置文件 - build
構(gòu)建工具的詳細代碼珠叔，開發(fā)環(huán)境及生產(chǎn)環(huán)境的配置弟劲。
包括 webpack vue-loader兔乞。 - config
如名，配置文件 - dist
構(gòu)建的版本輸出目錄报嵌∶可自行修改玄坦。 - doc
個人文檔目錄。 -
src
開發(fā)目錄豺总。包含 main.js 及其他择懂。
捕獲11.PNG - static
靜態(tài)資源目錄困曙。 - .babelrc
.editorconfig
.gitignore
.postcssrc.js
其他配置文件 - index.html
最終 模板。 - package.json
npm 的配置文件慷丽，記錄，項目的基本信息纲熏，以及各種依賴锄俄。
使用 npm i 能十分方便的安裝。
導(dǎo)入各種庫
在主入口導(dǎo)入全局使用的各類庫容握。
main.js
import Vue from 'vue'
import VueRouter from "vue-router"
import routes from './router/router'
// 導(dǎo)入 ui车柠、主題配置
import Element from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css'
// import './element-variables.scss'
// 導(dǎo)入測試數(shù)據(jù)接口
import './mock/mock'
Vue.config.productionTip = false
Vue.use(Element)
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
new Vue({
router
}).$mount("#app")
qs：axios 在index.html 采用script 引入cdn。
分割功能谈跛，排期碼代碼
大致方向感憾。
文件流向： main.js < 路由 < 組件
程序走向： main.js > 路由 > 組件
路由分發(fā)
文檔
根據(jù)需求寫出路由，由路由定出一塊塊功能阻桅。
具體組件
整個項目就是組件的組裝嫂沉；組件化開發(fā)稽寒。
基礎(chǔ)：vue路由的各種功能。單文件組件的使用趟章。
深入：構(gòu)建工具的具體代碼解析杏糙。
