首先電腦上要安裝最新版的nodeJS.官網(wǎng)下載,安裝完之后安裝淘寶npm鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
五部走:
- 全局安裝vue--cli
npm install -g vue-cli
- 進(jìn)入目錄–初始化項(xiàng)目
vue init webpack my-project
- 進(jìn)入項(xiàng)目
cd my-project
- 安裝依賴
npm install
- 啟動(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)目說明