vue的全家桶:
vue.js
vue-router.js
vue-cli (腳手架,快速搭建vue項(xiàng)目)
axios
vuex.js
vue-cli的安裝和使用
安裝: npm i @vue/cli -g
或者: npm i "@vue/cli" -g
檢測(cè)是否安裝vue-cli
vue -V (注意是大V)
顯示腳手架vue-cli的版本 @vue/cli 4.5.11
創(chuàng)建項(xiàng)目
vue create myapp (myapp為自定義項(xiàng)目名)
選擇default(Babel,Eslint)
Babel: 是一個(gè)把ES6+語(yǔ)法轉(zhuǎn)譯為低版本瀏覽器所支持的ES語(yǔ)法的編譯工具
ESlint: 是一個(gè)插件化并且可配置的 JavaScript 語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具肖方。ESLint 能夠幫你輕松寫(xiě)出高質(zhì)量的 JavaScript 代碼
啟動(dòng)項(xiàng)目:
1. 進(jìn)入目錄
2. npm run serve
3. 在瀏覽器輸入: http://localhost:8000
項(xiàng)目結(jié)構(gòu) :
1. README.md
2. package.json: (1)有scripts腳本 npm run serve (2)項(xiàng)目所需的依賴
3. package-lock.json: 鎖定依賴的版本
4. babel.config.js 了解括饶,是babel在轉(zhuǎn)換es6+代碼時(shí)的配置
5. .gitignore: git的忽略文件境肾,指定的文件和目錄不會(huì)提交到git倉(cāng)庫(kù)
6. node_modules: nodejs的包文件
7. public
(1)favicon.ico : 網(wǎng)站縮略圖
(2)index.html: 項(xiàng)目中唯一的一個(gè)網(wǎng)頁(yè)闽巩,內(nèi)部有一個(gè)#app的div
8. src: 最重要的文件夾糯俗,存儲(chǔ)項(xiàng)目的源代碼
(1) main.js : 是整個(gè)項(xiàng)目的入口文件
(2) App.vue: 它是一個(gè)vue的單文件組件(只要有.vue文件饶唤,即為一個(gè)獨(dú)立的組件蓝翰,組件中有三個(gè)標(biāo)簽: template,script,style)