1 安裝環(huán)境
Node.js
js的運行環(huán)境，相當于 java 的 jvm
官網：https://nodejs.org/en，下載最新穩(wěn)定版 18.16.0 LTS，雙擊安裝即可
自動安裝了npm，終端驗證：
C:\Users\Administrator>node -v
v18.16.0
C:\Users\Administrator>npm -v
9.5.1
npm = node package manager，js 包的管理工具，相當于 java 的 maven
# 安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
# 安裝webpack
npm install webpack -g
webpack -v
# 安裝vue-cli
npm install --global vue-cli
vue -V
NVM
nodejs version manage，Node.js 版本管理工具，相當于 git
下載地址：https://github.com/coreybutler/nvm-windows/releases
雙擊安裝即可，驗證：
C:\Users\Administrator>nvm -v
1.1.11
環(huán)境變量在安裝時已經自動創(chuàng)建
NVM_HOME=D:\nvm
NVM_SYMLINK=D:\nodejs
# Path
%NVM_HOME%
%NVM_SYMLINK%
修改配置 D:\nvm\setting.txt文章來源：http://www.zghlxwxcb.cn/news/detail-488882.html
root: D:\nvm
path: D:\nodejs
# 新增4行，配置鏡像
arch: 64
proxy: none
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
Chrome vue-devtools 插件
WebStorm
配置
Editor
Font
- Size：14
File and Code Template
- HTML File
<!-- Author: weiyupeng -->
<!-- DateTime: ${DATE} ${TIME} -->
- JavaScript File
/**
* @Author: weiyupeng
* @DateTime: ${DATE} ${TIME}
*
*/
- Vue Single File Component
<!-- Author: weiyupeng -->
<!-- DateTime: ${DATE} ${TIME} -->
Plugins
安裝 Vue.js 插件文章來源地址http://www.zghlxwxcb.cn/news/detail-488882.html
新建 Vue 項目
- 啟用web-pack自動部署項目架構
PS Z:\WebStormProject\vue-study> vue init webpack
? Generate project in current directory? Yes
? Project name vue-study
? Project description vue study
? Author weiyupeng
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
- package.json
{
"name": "vue-study",
"version": "1.0.0",
"description": "vue study",
"author": "weiyupeng",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
運行
npm run dev
# Your application is running here: http://localhost:8080
Vue 項目結構
├── build/ # webpack 配置文件；
│ └── ...
├── config/ # 與項目構建相關的常用的配置選項；
│ ├── index.js # 主配置文件
│ ├── dev.env.js # 開發(fā)環(huán)境變量
│ ├── prod.env.js # 生產環(huán)境變量
│ └── test.env.js # 測試環(huán)境變量
│
├── src/
│ ├── main.js # webpack 的入口文件；
│ ├── common/ # 存放項目共用的資源，如：常用的圖片、圖標，共用的組件、模塊、樣式，常量文件等等；
│ │ ├── assets/ # 存放項目共用的代碼以外的資源，如：圖片、圖標、視頻 等；
│ │ ├── components/ # 存放項目共用的組件，如：封裝的導航條、選項卡等等； 備注：這里的存放的組件應該都是展示組件；
│ │ ├── network/ # 存放項目的網絡模塊，如：接口；
│ │ ├── compatible/ # 存放項目的兼容模塊，如：適合App和微信各種接口的模塊；
│ │ ├── extension/ # 存放已有類的擴展模塊，如：對 Array 類型進行擴展的模塊；
│ │ ├── libraries/ # 存放自己封裝的或者引用的庫；
│ │ ├── tools/ # 自己封裝的一些工具
│ │ ├── constant.js # 存放js的常量；
│ │ ├── constant.scss # 存放scss的常量；
│ │ └── ...
│ └── app/ # 存放項目業(yè)務代碼；
│ ├── App.vue # app 的根組件；
│ └── ...
│
├── static/ # 純靜態(tài)資源，該目錄下的文件不會被webpack處理，該目錄會被拷貝到輸出目錄下；
├── test/ # 測試
│ ├── unit/ # 單元測試
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # 專為單元測試配置的eslint配置文件
│ │ ├── index.js # 測試編譯的入口文件
│ │ ├── jest.conf.js # Jest的配置文件
│ │ └── karma.conf.js # Karma的配置文件
│ │ └── setup.js # 在Jest之前運行的啟動文件；
│ └── e2e/ # e2e 測試
│ ├── specs/ # test spec files
│ ├── custom-assertions/ # 自定義的斷言
│ ├── runner.js # test runner 腳本
│ └── nightwatch.conf.js # test runner 的配置文件
├── .babelrc # babel 的配置文件
├── .editorconfig # 編輯器的配置文件；可配置如縮進、空格、制表類似的參數；
├── .eslintrc.js # eslint 的配置文件
├── .eslintignore # eslint 的忽略規(guī)則
├── .gitignore # git的忽略配置文件
├── .postcssrc.js # postcss 的配置文件
├── index.html # HTML模板
├── package.json # npm包配置文件，里面定義了項目的npm腳本，依賴包等信息
└── README.md
到了這里，關于Vue 開發(fā)環(huán)境搭建的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
