vue項目,快速搭建vue-cli環境指令

首先安裝好node.js以及npm淘寶鏡像的安裝包，檢測指令：node -v和npm -v

接下來打開終端操做紅色指令。

Microsoft Windows [版本 10.0.16299.904]
(c) 2017 Microsoft Corporation。保留全部權利。

C:\Users\wpl>npm i vue -g
+ vue@2.6.7
added 1 package from 1 contributor in 11.472s

C:\Users\wpl>npm i vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\wpl\AppData\Roaming\npm\vue -> C:\Users\wpl\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\wpl\AppData\Roaming\npm\vue-init -> C:\Users\wpl\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\wpl\AppData\Roaming\npm\vue-list -> C:\Users\wpl\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 107.123s

C:\Users\wpl>npm i webpack -g
C:\Users\wpl\AppData\Roaming\npm\webpack -> C:\Users\wpl\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN rollback Rolling back node-pre-gyp@0.10.3 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\Users\wpl\AppData\Roaming\npm\node_modules\webpack\node_modules\fsevents'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.29.5
added 321 packages from 199 contributors in 143.817s

C:\Users\wpl>cd \app （我建的文件夾名爲app）

C:\app>vue init webpack

? Generate project in current directory? Yes
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name app
? Project description A Vue.js project
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? no
? Pick an ESLint preset Standard
? Set up unit tests no
? Pick a test runner jest
? Setup e2e tests with Nightwatch? no
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "app".

# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

> chromedriver@2.46.0 install C:\app\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\wpl\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path C:\app\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\app\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

> uglifyjs-webpack-plugin@0.4.6 postinstall C:\app\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN rollback Rolling back node-pre-gyp@0.10.3 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\app\node_modules\fsevents\node_modules'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1592 packages from 1102 contributors and audited 30847 packages in 421.833s
found 73 vulnerabilities (66 low, 1 moderate, 5 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details

Running eslint --fix to comply with chosen preset rules...
# ========================

> app@1.0.0 lint C:\app
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!
# ========================

To get started:

npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

 

C:\app>npm i
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 30847 packages in 30.108s
found 73 vulnerabilities (66 low, 1 moderate, 5 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details

C:\app>npm start

> app@1.0.0 start C:\app
> npm run dev

> app@1.0.0 dev C:\app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

12% building modules 18/27 modules 9 active ...e=template&index=0!C:\app\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emitting

DONE Compiled successfully in 10445ms 14:42:58
I Your application is running here: http://localhost:8080

注意：

若是瀏覽器打開以後，沒有加載出頁面，有多是本地的 8080 端口被佔用，須要修改一下配置文件 config裏的index.js 的 post

 module.exports = {

dev: {

 // Paths

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {}, // 這裏能夠配置跨域

 // Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // 端口 就是改這裏
autoOpenBrowser: false, // 這裏是ture的話，就會自動打開瀏覽器。

個人端口沒有被佔用，因此直接啓動成功，打開 http://localhost:8080 就能看到歡迎頁面。

 vue-cli 的 webpack 配置分析

 從 package.json 能夠看到 開發 和 生產 環境的入口。

 "scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
},
dev 就是開發環境的啓動命令
build 是生產打包環境的命令
lint 是ESLint的檢查命令 在 --ext 前加一個 --fix 能夠自動修復不符合規範的代碼
打包上線：

運行 npm run build 命令，就能夠進行打包工做了，打包完成後，會生成 dist 目錄，項目上線時，把dist 目錄下的文件放到服務器就能夠了。

調試工具 vue-tool

 在谷歌商店，搜索這個插件，安裝到瀏覽器，調試項目很好用。

另： 

1.npm 開啓了npm run dev之後怎麼退出或關閉？ ctrl+c 2.--save-dev 自動把模塊和版本號添加到模塊配置文件package.json中的依賴裏devdependencies部分 3. --save-dev 與 --save 的區別 --save 安裝包信息將加入到dependencies（生產階段的依賴） --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），因此開發階段通常使用它.