1.首先全局安裝
npm install -g @vue/cli-service-global
2.創(chuàng)建項(xiàng)目
vue create 跟文件名
第一個(gè)為默認(rèn)配置族淮,第二個(gè)是自定義配置
在自定義配置中如果要選擇的話,按空格
babel:es6轉(zhuǎn)es5的工具
css pre-processors:預(yù)編譯
linter/format:代碼規(guī)范的檢查工具凭涂,不規(guī)范就會(huì)報(bào)錯(cuò)
unit tesing,esetesting:測(cè)試的工具
項(xiàng)目里面 需要什么就配置什么
4.按回車后
選擇node-sass
5.再次回車后
eslint的配置:選擇standard(標(biāo)準(zhǔn)的)
6.再次回車后
是save時(shí)候檢查還是提交時(shí)候檢查(eslint)
選擇save的時(shí)候檢查
7.再次回車后
bebel贴妻,postCss,ES等這些配置放在哪里切油?
是單獨(dú)的config里面呢還是packge.json里
8.選擇單獨(dú)放回車后
(你將來(lái)的項(xiàng)目都用這些配置嗎?)選擇NO
9.再次回車后
這時(shí)候已經(jīng)在配置項(xiàng)目了(也可以用vue ui來(lái)配置(圖形化))
回退版本(2.x的版本)的話就用npm install -g @vue/cli-init這個(gè)命令
10名惩。完成生成后的目錄(都是配置文件)
yarn.lock是依賴包版本的東西
postcss.config里面是自動(dòng)加前綴的澎胡,babel里面也是配置的代碼,這些都屬于配置項(xiàng)
editorconfig是自己編輯器的配置
browserslistrc瀏覽器的列表(瀏覽器的兼容版本)
NODEmodule(我們項(xiàng)目所依賴的包)
pubilc(公共的靜態(tài)文件)
src(主要代碼寫在這里面)
assets里面圖片文件
components里面組件娩鹉,以vue結(jié)尾的攻谁,也叫作單文件組件
一個(gè)單文件里面包含了html,JavaScript弯予,css
main.js里面
render這個(gè)方法渲染的就是App這個(gè)組件戚宦,渲染給誰(shuí)?通過(guò)¥mount渲染給#app锈嫩,#app在public的index.html里面
div里面真正顯示的是app.vue里面的這個(gè)組件受楼,這就是腳手架幫我們做的事情
server就是運(yùn)行垦搬,build的作用是打包,(html艳汽,css猴贰,js)交給瀏覽器去運(yùn)行
運(yùn)行的命令(npm run server)
運(yùn)行之后里面的東西怎么渲染出來(lái)的呢?
看app.vue里面
關(guān)于組件的引入
是ES6里面的寫法河狐,引入一個(gè)模塊的話用import這種方式米绕,相當(dāng)于gulp里面的require
通過(guò)export default暴露出去,定義一個(gè)組件其實(shí)就是對(duì)象馋艺,別的地方需要的話通過(guò)import去引入栅干,
注意:組件的命名通過(guò)大駝峰的方式命名,在項(xiàng)目當(dāng)中我們的配置一幫都裝在packge丈钙。json里面
真正項(xiàng)目的入口是main非驮。js,渲染到默認(rèn)的APP這個(gè)組件里面雏赦,掛載到了#APP