Vue-cli是vue官方出品的快速构建单页应用的脚手架。可以帮助我们快速搭建开发所需要的环境，省去很多精力！这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。这里头牵扯的内容也比较多。
webpack，npm，nodejs，babel都包括在内！
1.1 安装 vue-cli
官网：https://cli.vuejs.org/guide/
GitHub：https://github.com/vuejs/vue-cli
全局安装： npm install -g @vue/cli
1.2 初始化项目
执行： vue init <template-mode> <project-name>
直接有一个前提： vue init <template-mode> <project-name> 直接执行这个会提示你
【
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again. 按照提示 安装 @vue/cli-init 这个包就好了
】
<template-mode> 有好几种模式，一般都用 webpack 就好了
这里假设执行：
vue init webpack vuecliTest
D:phpstudyWWWlecturedemovuevue-cli> vue init webpack vuecliTest ? Project name vueclitest ? Project description A Vue.js project ? Author Hijacku621 <1409330098@qq.com> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recommended) no vue-cli · Generated "vuecliTest". # Project initialization finished! # ======================== To get started: cd vuecliTest npm install (or if using yarn: yarn) npm run lint -- --fix (or for yarn: yarn run lint --fix) npm run dev
执行过程中会叫你确认一些选项，看自己需求来确认就好了。最后 询问你是否帮你 安装 package.json中的内容，建议还是自己手动装一下。
装好后 执行： npm start 【默认安装好 package.json中配置有脚本简化执行“npm run dev”】
1 > npm run dev 2 3 4 > vueclitest@1.0.0 dev D:phpstudyWWWlecturedemovuevue-clivueclitest 5 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 6 7 14% building modules 35/37 modules 2 active ...movuevue-clivueclitestsrcApp.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 8 95% emitting 9 10 WARNING Compiled with 3 warnings 上午10:03:31 11 warning in ../vuecliTest/node_modules/webpack/buildin/global.js 12 13 There are multiple modules with names that only differ in casing. 14 This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 15 Use equal casing. Compare these module identifiers: 16 * D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_moduleswebpackuildinglobal.js 17 Used by 2 module(s), i. e. 18 D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_modules ode-libs-browser ode_modulespunycodepunycode.js 19 * D:phpstudyWWWlecturedemovuevue-clivueclitest ode_moduleswebpackuildinglobal.js 20 Used by 1 module(s), i. e. 21 D:phpstudyWWWlecturedemovuevue-clivueclitest ode_modulesvuedistvue.esm.js 22 23 warning in ../vuecliTest/node_modules/webpack/hot/emitter.js 24 25 There are multiple modules with names that only differ in casing. 26 This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 27 Use equal casing. Compare these module identifiers: 28 * D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_moduleswebpackhotemitter.js 29 Used by 1 module(s), i. e. 30 D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_moduleswebpack-dev-serverclientindex.js?http://localhost:8080 31 * D:phpstudyWWWlecturedemovuevue-clivueclitest ode_moduleswebpackhotemitter.js 32 Used by 1 module(s), i. e. 33 D:phpstudyWWWlecturedemovuevue-clivueclitest ode_moduleswebpackhotdev-server.js 34 35 warning in ../vuecliTest/node_modules/webpack/hot/log.js 36 37 There are multiple modules with names that only differ in casing. 38 This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 39 Use equal casing. Compare these module identifiers: 40 * D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_moduleswebpackhotlog.js 41 Used by 1 module(s), i. e. 42 D:phpstudyWWWlecturedemovuevue-clivuecliTest ode_moduleswebpackhot nonrecursive /^./log$/ 43 * D:phpstudyWWWlecturedemovuevue-clivueclitest ode_moduleswebpackhotlog.js 44 Used by 2 module(s), i. e. 45 D:phpstudyWWWlecturedemovuevue-clivueclitest ode_moduleswebpackhotdev-server.js
执行 npm start 只要不报错 提示中 会有 一个 “ http://localhost:8080” 访问就会看到如下网页。表示项目初始化ok！
