vue項(xiàng)目總流程

一、安裝和理解框架里的文件

1.首先，安裝vue全局環(huán)境：

npm install -g vue-cli

然后在一個(gè)項(xiàng)目下建一個(gè)比如jsj這樣的目錄,進(jìn)入這個(gè)目錄打開(kāi)命令行窗口：vue init webpack pro(這個(gè)是項(xiàng)目名字)，寫完這個(gè)命令之后會(huì)出現(xiàn)一些命令行讓回答y或n，這個(gè)時(shí)候這樣：

如：1) vue-router? Y

? 2)Lint your code? n(這個(gè)是代碼檢查比較嚴(yán)謹(jǐn)，以后等項(xiàng)目做的完整了就可以把它裝上去了)

? 3)unit tests ? Y

? 4)e2e tests ..? n

? 5)Yes,use npm

2.安裝好之后：輸入這樣的命令行

1)cd pro

2)npm run dev(啟動(dòng)項(xiàng)目)

3.啟動(dòng)完項(xiàng)目，會(huì)出現(xiàn)一個(gè)端口號(hào)，直接在瀏覽器輸入端口號(hào)就可以了

二、分析目錄結(jié)構(gòu)

1.index.html這個(gè)文件是單頁(yè)面應(yīng)用（SPA）：整個(gè)項(xiàng)目里面只有一個(gè)html頁(yè)面，作用：用來(lái)加載主視圖的一個(gè)html主文件。

2.package,json作用：整個(gè)項(xiàng)目的主配置文件，包含指令，包含所依賴的一些環(huán)境

3.static目錄是一個(gè)空：主要用來(lái)存放靜態(tài)資源文件，如圖片、音視頻

4.build文件（打包、建立）：是要把當(dāng)前的項(xiàng)目工程化，里面是跟打包相關(guān)的配置文件。它里面的

1）webpack.base.conf.js是webpack基礎(chǔ)配置文件，entry output resolve module(加載器的配置)

2）webpack.dev.conf.js是熱更新監(jiān)聽(tīng)器的一個(gè)配置，堅(jiān)挺的是index.html這個(gè)文件

3）webpack.prod.conf.js對(duì)插件二次聲明的一個(gè)配置

4.config目錄里面，它本身就是配置的意思，能用到的就是index.js，在這里面管理了主機(jī)、域名、端口號(hào)、路徑的聲明

5.src目錄里（能夠編寫代碼的目錄）：

1）app.vue:

export default {//把單文件組件暴露出去了，有地方是要用它
  name: 'App'
}

2)main.js:管理整個(gè)入口文件

import App from './App'  //把聲明的組件對(duì)象拿過(guò)來(lái)
import router from './router'//路由規(guī)則的對(duì)象

6.怎么用？組件寫在components,路由規(guī)則配置在router里面

注意：所有項(xiàng)目工程化的插件都要以以來(lái)的形式裝過(guò)來(lái)：如:

axios:npm i axios --save-dev

哪個(gè)組件需要交互，就在哪個(gè)組件里倒入axios對(duì)象

7.怎樣借助第三方動(dòng)畫：要以模塊的形式把動(dòng)畫css文件導(dǎo)到主配置文件里面：在src文件里建一個(gè)stylesheet目錄，里面放進(jìn)去animate.css文件，然后把這句話放到 main.js里 import './stylesheet/animate.css'

三、移動(dòng)端的UI框架如何使用

1.去百度官網(wǎng)搜mintui，然后進(jìn)入U(xiǎn)I官網(wǎng)

npm install mint-ui -S把這個(gè)命令行輸入到終端安裝下

然后點(diǎn)擊開(kāi)始使用，點(diǎn)擊中文vue2.0，點(diǎn)擊左邊欄的Quickstart 然后復(fù)制這個(gè)

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

放到main.js里面就可以使用了