構建vue項目
1 安裝nodejs, 進入node官網
2 使用npm全局安裝vue-cli
npm i(install) vue-cli -g
3 新建一個文件夾,在該文件內打開命令窗口(在該文件shift+右擊鼠標 -> 在此處打開命令窗口)
使用命令創建項目
vue init webpack [項目名稱]
命令輸入之後,會出現以下信息
Project name 註意:該項目名稱不能輸入中文
Project description 項目的描述
Author 作者
Vue build standalone
Install vue-router? 是否安裝vue-router
Use ESLint to lint your code? 是否使用ESLint管理代碼
ESLint是個代碼風格管理工具,用來避免低級錯誤和統一代碼的風格。(官網https://eslint.org/)
Pick an ESLint preset 選擇一個ESLint預設,代碼風格
Setup unit tests with Karma + Mocha? 是否安裝單元測試
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e (端到端) 測試
4 cd test進入該目錄
5 安裝依賴 npm install
可以安裝淘寶鏡像,打開命令行窗口,輸入
npm install -g cnpm --registry=https://registry.npm.taobao.org
之後安裝依賴可以運行 cnpm i
6 開始運行 npm run dev 打開其鏈接地址就ok了
項目總體框架
build ------------------------------------------------------- webpack相關配置
config -------------------------------------------------------- vue基本配置文件
src ------------------------------------------------------- 項目核心文件
static ------------------------------------------------------- 靜態資源
test ------------------------------------------------------- 單元測試
.babelrc ------------------------------------------------------- babel編譯參數
.editorconfig --------------------------------------------- 代碼格式
.eslintrc.js --------------------------------------------- ESLint配置參數的介紹
.gitignore --------------------------------------------- git上傳需要忽略的文件配置
.postcssrc.js --------------------------------------------- 轉換css的工具
index.html --------------------------------------------- 主頁
package.json --------------------------------------------- 項目基本信息
README.md --------------------------------------------- 項目說明
構建vue項目