構(gòu)建一個(gè)項(xiàng)目
1.創(chuàng)建項(xiàng)目
打開(kāi)cmd命令，進(jìn)入你需要?jiǎng)?chuàng)建項(xiàng)目的目錄下，比如：我要在d盤(pán)的project下創(chuàng)建一個(gè)名為mydemo的項(xiàng)目
D:\project>vue init webpack mydemo
之后一大串墓赴，項(xiàng)目名稱，作者航瞭，是否build,是否使用代碼規(guī)范等等一系列诫硕，寶寶是一直entry下去的。
然后它會(huì)提示三個(gè)命令：
cd mydemo //進(jìn)入你所在項(xiàng)目
npm install //安裝依賴包
npm run dev //運(yùn)行項(xiàng)目
2.安裝依賴包
你的文件夾有以下基本文件夾：build,config,src,static刊侯。
生成的項(xiàng)目無(wú)法直接運(yùn)行章办，不然會(huì)報(bào)錯(cuò)，項(xiàng)目本身依賴很多包模塊，你需要安裝藕届。
打開(kāi)cmd進(jìn)入你的項(xiàng)目目錄下：
D:\project\mydemo>npm install
這個(gè)過(guò)程會(huì)很久挪蹭。
完成之后，項(xiàng)目下會(huì)多出一個(gè)node_modules文件夾休偶，這就是我們項(xiàng)目所需的依賴包梁厉。
3.運(yùn)行項(xiàng)目
打開(kāi)cmd進(jìn)入你的項(xiàng)目目錄下:
D:\project\mydemo>npm run dev
會(huì)提示項(xiàng)目運(yùn)行地址：http://localhost:8080
瀏覽器進(jìn)入地址，你會(huì)看到vue圖標(biāo)踏兜，說(shuō)明項(xiàng)目運(yùn)行成功懂算。
用cmd命令行很麻煩，如果編碼軟件支持庇麦，可以直接用編碼軟件直接打開(kāi)終端運(yùn)行，較為方便喜德。
這個(gè)時(shí)候山橄，我就去看官方文檔去了，了解一下：
- 構(gòu)建一個(gè)Vue實(shí)例舍悯，實(shí)例的生命周期
- 模板語(yǔ)法
- 指令：v-if,v-show,v-for,v-bind,v-on,v-model
- 數(shù)據(jù)的處理如何與指令或模板結(jié)合
- class/style的綁定
- 組件
- 單頁(yè)與多頁(yè)
- 路由
- 組件注冊(cè)航棱，通信
目錄
1、配置文件
- webpack.base.conf.js
基礎(chǔ)的環(huán)境配置萌衬，可以說(shuō)是各個(gè)環(huán)境（包括開(kāi)發(fā)環(huán)境饮醇，生產(chǎn)環(huán)境，測(cè)試環(huán)境）都需要的配置秕豫，公用配置部分朴艰。
包含，編譯入口混移，輸出路徑和命名規(guī)則祠墅，省略拓展名，配置很長(zhǎng)的相對(duì)路徑的別名歌径，loader配置不同模塊的處理規(guī)則
- webpack.dev.conf.js
webpack開(kāi)發(fā)環(huán)境的核心配置文件毁嗦，系統(tǒng)配置文件。
當(dāng)npm run dev時(shí)回铛，運(yùn)行的就是此文件狗准。
包含，插件
- webpack.prod.conf.js
webpack生產(chǎn)環(huán)境的核心配置文件茵肃，系統(tǒng)配置文件腔长。
當(dāng)npm run build時(shí)，運(yùn)行的就是此文件验残。
包含饼酿，打包，
- config/index.js
全局配置文件。
包含故俐，想鹰，是否使用代碼規(guī)范，項(xiàng)目入口药版，端口辑舷，服務(wù)器代理，
前后臺(tái)分離時(shí)必須部署配置此文件
2槽片、dist文件夾
build后出現(xiàn)的打包文件夾
3何缓、src
應(yīng)當(dāng)包含以下文件（單頁(yè)為例）
- assets //圖片css
- css
- img
- common //共用js和api
- components //組件
- router
- index.js //路由配置
- app.vue //.vue入口
- index.js //js入口，相當(dāng)于（main.js）
- package.json
用來(lái)管理本地安裝 npm 包的唯一文件还栓。它描述了當(dāng)前項(xiàng)目依賴的包的列表碌廓，包含項(xiàng)目依賴包的版本，便于項(xiàng)目管理和移植
4剩盒、gitignore
忽略文件
- .DS_Store
- node_modules/
- /dist/
- npm-debug.log*
- yarn-debug.log*
- yarn-error.log*
- /test/unit/coverage/
- /test/e2e/reports/
- selenium-debug.log
- .idea
- .vscode
- *.suo
- .ntvs
- *.njsproj
- *.sln
部分轉(zhuǎn)載來(lái)自https://segmentfault.com/a/1190000016886928
