VUE進(jìn)階篇Part10（使用vue--cli腳手架一鍵搭建工 程）

2019-6-10    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

按照這個(gè)來配置就好了，這里相當(dāng)于是幫你把webpack需要的繁瑣的配置給你都弄好了，然后你直接從那里全部下下來就可以

記得先下好nodejs，安裝的代碼記得全都c v，不要自己敲

安裝完nodejs之后再安裝淘寶npm鏡像，安裝完了之后后面的安裝速度會(huì)快一點(diǎn)

npm install -g cnpm --registry=https://registry.npm.taobao.org
1
然后按照下面的五步流程一個(gè)一個(gè)來

1、全局安裝vue-cli

npm install -g vue-cli
1
2、進(jìn)入目錄–初始化項(xiàng)目

vue init webpack my-project //這個(gè)要進(jìn)入項(xiàng)目目錄再用，會(huì)創(chuàng)建一個(gè)my-project的文件夾
1
3、進(jìn)入項(xiàng)目

cd my-project
1
4、安裝依賴

npm install
1
5、啟動(dòng)項(xiàng)目

npm run dev
1
以上執(zhí)行完后會(huì)出現(xiàn)一個(gè) my-project 項(xiàng)目文件夾，用vscode打開后會(huì)看到以下目錄

下面解釋一下這些文件及目錄分別是干什么的

目錄結(jié)構(gòu)的分析

1、bind
├── build // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼 記憶：（夠賤） 9個(gè)
│ ├── build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
│ ├── check-versions.js // 檢查node&npm等版本
│ ├── dev-client.js // 熱加載相關(guān)
│ ├── dev-server.js // 構(gòu)建本地服務(wù)器
│ ├── utils.js // 構(gòu)建配置公用工具
│ ├── vue-loader.conf.js // vue加載器
│ ├── webpack.base.conf.js // webpack基礎(chǔ)環(huán)境配置
│ ├── webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
│ └── webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置

2、config
├── config// 項(xiàng)目開發(fā)環(huán)境配置相關(guān)代碼 記憶： （環(huán)配） 3個(gè)
│ ├── dev.env.js // 開發(fā)環(huán)境變量（看詞明意）
│ ├── index.js //項(xiàng)目一些配置變量
│ └── prod.env.js // 生產(chǎn)環(huán)境變量

3、node_modules
├──node_modules// 項(xiàng)目依賴的模塊 記憶： （依賴） *個(gè)

4、src
├── src// 源碼目錄 5

1
│ ├── assets// 資源目錄
│ │ └── logo.png
2
│ ├── components// vue公共組件
│ │ └── Hello.vue
3
│ ├──router// 前端路由
│ │ └── index.js// 路由配置文件
4
│ ├── App.vue// 頁面入口文件（根組件）
5
│ └── main.js// 程序入口文件（入口js文件）

5、static
└── static// 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
│ ├── .gitkeep

6、剩余的文件
├── .babelrc// ES6語法編譯配置
├── .editorconfig// 定義代碼格式
├── .gitignore// git上傳需要忽略的文件格式
├── index.html// 入口頁面
├── package.json// 項(xiàng)目基本信息
├── README.md// 項(xiàng)目說明
--------------------- 

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔