初始化項(xiàng)目
這里我們使用vue-cli來自動生成vue.js項(xiàng)目的模板护盈。
安裝Node.js
用npm安裝vue-cli
npm install -g vue-cli
可能會提示權(quán)限的問題挟纱，需要授權(quán)
sudo chmod -R 777 /usr/local/lib
- 使用vue-cli
vue init webpack
vue為我們提供了兩個(gè)模板，webpack和webpack-simple腐宋，webpack-simple比較適合小項(xiàng)目紊服，這里我們用webpack。
- 安裝依賴并運(yùn)行
npm install
npm run dev
項(xiàng)目結(jié)構(gòu)
我們下面來看一下項(xiàng)目目錄下這一堆東西分別是什么胸竞。
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
build/
這個(gè)目錄包含開發(fā)環(huán)境和生產(chǎn)環(huán)境Webpack的實(shí)際配置欺嗤。通常不需要修改這些文件。
config/index.js
這是主配置文件卫枝，是build的通用配置選項(xiàng)煎饼。包括開發(fā)環(huán)境
src/
這是你主要代碼的所在位置，也包括assets校赤。
static/
這里是不需要用Webpack處理的靜態(tài)資源吆玖。
index.html
這是我們單頁面應(yīng)用程序的模板。在開發(fā)和構(gòu)建期間马篮，Webpack將生成資產(chǎn)沾乘，并將生成資產(chǎn)的url自動注入到此模板中呈現(xiàn)出最終的html。
package.json
包含所有構(gòu)建依賴項(xiàng)和構(gòu)建命令的npm軟件包元文件浑测。
