浅谈vue-cli安装及快速创建

前言

---

vue初始化解释

 Project name hello-vue    //回车即可
?Project description A Vue.js project //回车即可
Author xiusan <xiaojinlu1990@163.com> //回车即可
Vue build (Use arrow keys)
Vue build standalone
Install vue-router? No   //  是否需要路由如果需要就输入y回车，如果不需要就选n
 Use ESLint to lint your code? No  //  是否需要代码严格检查如果需要就输入y回车，如果不需要就选n，一般选n
 Set up unit tests No  //  是否需要生成测试如果需要就输入y回车，如果不需要就选n
Setup e2e tests with Nightwatch? No//  是否需要自动化测试 如果需要就输入y回车，如果不需要就选n

目标

快速初始化

关键字和命令

npm install -g vue-cli
vue init webpack hello-vue
npm run dev 或者 npm start

一、定义

vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

二、使用及场景

1 安装vue-cli

全局安装
npm install -g vue-cli

2 初始化项目

 vue init webpack hello-vue
 

3 启动

 npm run dev 或者  npm start

4访问

http://localhost:8080

总结

D:\vuework\vue-work-03>vue init webpack hello-vue

? Project name hello-vue    //回车即可
? Project description A Vue.js project //回车即可
? Author xiusan <xiaojinlu1990@163.com> //回车即可
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? No   //  是否需要路由如果需要就输入y回车，如果不需要就选n
? Use ESLint to lint your code? No  //  是否需要代码严格检查如果需要就输入y回车，如果不需要就选n，一般选n
? Set up unit tests No  //  是否需要生成测试如果需要就输入y回车，如果不需要就选n
? Setup e2e tests with Nightwatch? No//  是否需要自动化测试 如果需要就输入y回车，如果不需要就选n
? Should we run `npm install` for you after the project has been created? (recommended) (Use ar? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello-vue".


# 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 chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for
usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0
config used in other tools.

> core-js@2.6.12 postinstall D:\vuework\vue-work-03\hello-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

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 -)


> ejs@2.7.4 postinstall D:\vuework\vue-work-03\hello-vue\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\vuework\vue-work-03\hello-vue\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 ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1272 packages from 675 contributors in 132.638s

40 packages are looking for funding
  run `npm fund` for details


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

To get started:

  cd hello-vue
  npm run dev

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

D:\vuework\vue-work-03>cd hello-vue //到对应的初始化文件夹先

D:\vuework\vue-work-03>cd hello-vue    //到对应的初始化文件夹先

D:\vuework\vue-work-03\hello-vue>npm run dev //命令启动

> hello-vue@1.0.0 dev D:\vuework\vue-work-03\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 24/29 modules 5 active ...ork\vue-work-03\hello-vue\src\App.vue{ parser:
"babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 11202ms                                                15:50:13

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

参考

官网：https://github.com/vuejs/vue-cli
多留言多点赞你们的只支持是我坚持下去的动力，都支棱起来！！！