github
vue學(xué)習(xí)筆記（2）主要介紹項(xiàng)目的基本設(shè)置，如axios設(shè)置和項(xiàng)目顏色控制
vue學(xué)習(xí)筆記（3）主要介紹vue的router簡(jiǎn)單用法
vue是一個(gè)前端框架，通過將html中的各種dom渲染成vue自己的虛擬dom，然后通過虛擬dom進(jìn)行數(shù)據(jù)雙向綁定完成數(shù)據(jù)的渲染。這樣在編寫頁面的時(shí)候大大提高了編寫效率，并且學(xué)習(xí)曲線比較平緩，對(duì)h5有基礎(chǔ)的認(rèn)識(shí)就可以進(jìn)行相應(yīng)的開發(fā)了。
vue的項(xiàng)目創(chuàng)建可以基于腳手架進(jìn)行相關(guān)的設(shè)置，集成webpack很方便的進(jìn)行vue項(xiàng)目的打包，這樣打包后的文件可以直接進(jìn)行nginx或者web服務(wù)器工具，很方便的進(jìn)行配置。
vue優(yōu)點(diǎn)
1、數(shù)據(jù)雙向綁定
2、學(xué)習(xí)成本低，學(xué)習(xí)曲線平緩
3、前后端分離
vue項(xiàng)目創(chuàng)建
一、安裝npm，vue，vue-cli
在vue構(gòu)建的時(shí)候一般使用npm安裝，也可以使用cnpm，
去nodejs官網(wǎng)去下載對(duì)應(yīng)的安裝包即可安裝node，而npm是繼承在nodejs的包管理工具。同時(shí)就安裝了npm，這一步大家就自己探索吧。
然后下一步就要裝，vue和vue-cli了
npm install vue
npm install @vue/cli
#全局安裝
npm install -g vue
npm install -g @vue/cli
#腳手架2.x版本
npm install -g vue-cli
腳手架有兩個(gè)版本，一個(gè)是2.x版本，一個(gè)是3.0版本，我建議使用3.0版本，其有更強(qiáng)大的圖形管理界面和更簡(jiǎn)單的配置，可以通過使用新增文件的方式進(jìn)行配置。
二、使用vue-cli創(chuàng)建項(xiàng)目
在需要?jiǎng)?chuàng)建項(xiàng)目的文件夾里
vue create hello-world #項(xiàng)目名稱
然后會(huì)出現(xiàn)配置命令行，這個(gè)時(shí)候可以根據(jù)提示進(jìn)行項(xiàng)目的配置，新學(xué)者可以使用default進(jìn)行默認(rèn)創(chuàng)建項(xiàng)目，然后通過創(chuàng)建好的項(xiàng)目結(jié)構(gòu)，了解一下每一個(gè)目錄文件的具體用處。然后再通過自定義配置創(chuàng)建不同的項(xiàng)目，來查看每一個(gè)配置對(duì)于初始項(xiàng)目添加的是哪些內(nèi)容，來進(jìn)行整體項(xiàng)目的了解。
自定義配置是配置項(xiàng)目中需要使用到的插件進(jìn)行配置，主要是babel，使用的js還是ts，是否使用pwa（一般h5項(xiàng)目不需要），router，vuex，css預(yù)加載器，代碼檢查，單元測(cè)試，e2e測(cè)試這幾項(xiàng)內(nèi)容進(jìn)行配置。一般的話可以勾選babel，router，vuex（看項(xiàng)目中是否會(huì)用到狀態(tài)管理），代碼檢查等，按需勾選。
配置好了后就可以進(jìn)入項(xiàng)目中進(jìn)行項(xiàng)目結(jié)構(gòu)的了解了。
項(xiàng)目結(jié)構(gòu)非常簡(jiǎn)單，主要有三個(gè)文件夾：
- node_modules
存放項(xiàng)目中所需要的基礎(chǔ)插件 - public
存放的是入口文件index.html和靜態(tài)文件 - src
主要工作目錄，用于存放項(xiàng)目中使用到的圖片資源以及相關(guān)的組件，和頁面，router，狀態(tài)管理等文件
還有幾個(gè)比較重要的文件 - babel.config.js
配置babel，選擇js的編譯方式 - package.json
用于項(xiàng)目配置，主要設(shè)置項(xiàng)目名稱，版本號(hào)，一些腳本如打包，sever，測(cè)試腳本。還有項(xiàng)目依賴和dev環(huán)境依賴，eslint校驗(yàn)方式等設(shè)置。 - vue.config.js （默認(rèn)沒有自己按需創(chuàng)建）
腳手架的相關(guān)配置，具體可以查看vue-cli配置
基本上vue項(xiàng)目創(chuàng)建就先介紹到這里了，如果對(duì)于vue語法有不了解的可以去vue官網(wǎng)了解一下
加油吧，快去創(chuàng)建自己的vue項(xiàng)目吧！
