安裝
npm install -g @vue/cli
創(chuàng)建項目
vue create 項目名
選擇預(yù)設(shè)環(huán)境
使用鍵盤的上下鍵進(jìn)行選擇佛玄,enter鍵確定
- 默認(rèn)情況下是default(bable eslint)
bable:下一代JavaScript編譯器涧狮,將es6語法編譯為es5語法
eslint:規(guī)范代碼行為逃呼,可組裝的JavaScript和jsx檢查工具
- 可點擊第二個烙博,進(jìn)行自主選擇
鍵盤上下鍵選擇,空格選中
- 創(chuàng)建的項目各個文件
node_modules 依賴包
public 靜態(tài)資源文件夾
favicon.ico 項目小圖標(biāo)
index.html 項目入口頁面的模板
src 項目的源文件夾(存放的是需要webpack打包的文件)
.browserslistrc 里面所配置的是瀏覽器的兼容配置
.editorconfig 編輯器的配置規(guī)則
.eslintrc.js eslint的配置文件
babel.config.js babel的配置文件
postcss.config.js post的配置文件
- 項目的啟動
開發(fā) npm run serve
生產(chǎn) npm run build
lint npm run lint
目前腳手架將webpack配置都給集成進(jìn)去飞涂,若需要配置可以通過配置vue.config.js的方式來修改
- 首先找項目中的main.js文件
其中的$mount 是一個實例方法嫌褪,能夠在實例化vue對象之后呀枢,再掛載到頁面上
render函數(shù)與template類似--HTML模板,h('div',['hellow',h('h1','我是h1標(biāo)簽')])相當(dāng)于創(chuàng)建一個dom節(jié)點笼痛,在h里面加入第二個參數(shù){}可以添加類名和樣式
export default 表示es6中的暴露