vue-cli脚手架安装

vue-cli的优势

1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；

2、提供了一套本地测试服务器，而且是一个热加载的服务器；

3、提供了自己的一套集成打包上线的方案，webpack 或者gulpify在创建项目的时候可以进行选择；

有了以上优势，可以非常快速的搭建项目；

vue-cli对系统的要求
需要node.js的环境

vue-cli的安装

npm install -g vue-cli@2.9.6

查看版本vue -V

使用vue-cli创建项目

vue init webpack vue_demo

根据向导建立我们的项目

D:\vue>vue init webpack vue_demo

? Project name vue_demo
? Project description my vue demo
? Author huangbaokang
? 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

   vue-cli · Generated "vue_demo".


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

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
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 flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
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.

> core-js@2.6.9 postinstall D:\vue\vue_demo\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\vue\vue_demo\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1321 packages from 701 contributors and audited 12299 packages in 265.512s
found 10 vulnerabilities (6 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details


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


> vue_demo@1.0.0 lint D:\vue\vue_demo
> eslint --ext .js,.vue src "--fix"


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

To get started:

  cd vue_demo
  npm run dev

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

而且给出了运行的命令

cd vue_demo
npm run dev

执行完之后，可以知道运行的端口8080

D:\vue\vue_demo>npm run dev

> vue_demo@1.0.0 dev D:\vue\vue_demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 21/27 modules 6 active ...e&index=0!D:\vue\vue_demo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 14633ms


 I  Your application is running here: http://localhost:8080

浏览器访问 http://localhost:8080

修改端口的方法
打开config下的index.js 把 port改成80 autoOpenBrowser改成true即可。