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里面
![]()
image.png
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
