命令行工具cli
在安裝node岭粤、npm后創(chuàng)建vue項(xiàng)目
npm install -g vue-cli? (-g? 是全局安裝 會(huì)安裝node 的文件夾下)
vue init webpack first-vue
cd first-vue
npm install
npm run dev
然后? 瀏覽器下運(yùn)行?
若是?Module build failed: Error: No parser and no file path given, couldn't infer a parser. 報(bào)錯(cuò) 執(zhí)行：
npm i prettier@~1.12.0
npm？cnpm泼橘？
npm（node package manager）--------nodejs的包管理器扣孟，用于node插件管理（包括安裝、卸載瞬雹、管理依賴等）
cnpm?'中國版'npm??npm安裝插件是從國外服務(wù)器下載昧谊，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常? ?這是一個(gè)完整 npmjs.org 鏡像呢诬，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步
命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
注：cnpm跟npm用法完全一致尚镰，只是在執(zhí)行命令時(shí)將npm改為cnpm
npm run dev指令分析
bulid與run的文件?
package.json里面
"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build":"node build/build.js",
所以 運(yùn)行”npm run dev”的時(shí)候執(zhí)行的是build/webpack.dev.conf.js文件
????????運(yùn)行”npm run build”的時(shí)候執(zhí)行的是build/build.js文件
build/webpack.dev.conf.js文件：
????將hot-reload相關(guān)的代碼添加到entry chunks
????合并基礎(chǔ)的webpack配置
????使用styleLoaders
????配置Source Maps
????配置webpack插件
webpack.base.conf.js配置文件
????是vue開發(fā)環(huán)境的wepack相關(guān)配置文件，主要用來處理各種文件的配置
? ? 參考【https://www.cnblogs.com/ye-hcj/p/7082620.html】
build/utils.js和build/vue-loader.conf.js
? ??utils主要完成下面3件事：
????????配置靜態(tài)資源路徑
????????生成cssLoaders用于加載.vue文件中的樣式
????????生成styleLoaders用于加載不在.vue文件中的單獨(dú)存在的樣式文件
????vue-loader.conf? ?則只配置了css加載器以及編譯css之后自動(dòng)添加前綴
build/build.js文件：
????loading動(dòng)畫
????刪除創(chuàng)建目標(biāo)文件夾
????webpack編譯
????輸出信息
config/index.js:
????描述了開發(fā)和構(gòu)建兩種環(huán)境下的配置
vue項(xiàng)目目錄結(jié)構(gòu)
build? ? ?項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
config? ?配置目錄哪廓，包括端口號(hào)等
node_modules? ??npm 加載的項(xiàng)目依賴模塊
src? ? ? ? ?assets: 放置一些圖片狗唉，如logo等
? ? ? ? ? ? ?components: 組件文件
? ? ? ? ? ? ?App.vue: 項(xiàng)目入口文件
? ? ? ? ? ? ?main.js: 項(xiàng)目的核心文件
static? ? 靜態(tài)文件 如圖片 字體
test? ? ? 初始測試目錄 可刪除
index.html? ?首頁入口文件
package.json? ??項(xiàng)目配置文件
這里有一張圖清晰的告訴我們目錄結(jié)構(gòu)的含義
