vue项目,快速搭建vue-cli环境指令

首先安装好node.js以及npm淘宝镜像的安装包，检测指令：node -v和npm -v

接下来打开终端操作红色指令。

Microsoft Windows [版本 10.0.16299.904]
(c) 2017 Microsoft Corporation。保留所有权利。

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

C:Userswpl>npm i vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:UserswplAppDataRoaming pmvue -> C:UserswplAppDataRoaming pm ode_modulesvue-cliinvue
C:UserswplAppDataRoaming pmvue-init -> C:UserswplAppDataRoaming pm ode_modulesvue-cliinvue-init
C:UserswplAppDataRoaming pmvue-list -> C:UserswplAppDataRoaming pm ode_modulesvue-cliinvue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 107.123s

C:Userswpl>npm i webpack -g
C:UserswplAppDataRoaming pmwebpack -> C:UserswplAppDataRoaming pm ode_moduleswebpackinwebpack.js
npm WARN rollback Rolling back node-pre-gyp@0.10.3 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:UserswplAppDataRoaming pm ode_moduleswebpack ode_modulesfsevents'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_moduleswebpack ode_modulesfsevents):
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:Userswpl>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 ode_moduleschromedriver
> 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:UserswplAppDataLocalTemp2.46chromedriverchromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path C:app ode_moduleschromedriverlibchromedriver
Done. ChromeDriver binary available at C:app ode_moduleschromedriverlibchromedriverchromedriver.exe

> uglifyjs-webpack-plugin@0.4.6 postinstall C:app ode_moduleswebpack ode_modulesuglifyjs-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 ode_modulesfsevents ode_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_modulesfsevents):
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_modulesfsevents):
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:appsrcApp.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（开发阶段的依赖），所以开发阶段一般使用它.