使用vue--cli腳手架一鍵搭建工 程

首先電腦上要安裝最新版的nodeJS.官網(wǎng)下載,安裝完之后安裝淘寶npm鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

五部走:

  1. 全局安裝vue--cli
npm install -g vue-cli
  1. 進(jìn)入目錄–初始化項(xiàng)目
vue init webpack my-project
  1. 進(jìn)入項(xiàng)目
cd my-project
  1. 安裝依賴
npm install
  1. 啟動(dòng)項(xiàng)目
npm run dev

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

一、
├── 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)境配置

二、
├── 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)境變量

三、
├──node_modules// 項(xiàng)目依賴的模塊 記憶: (依賴) *個(gè)

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

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容