vue-cli的创建

创建vue项目

俗称 vue-cli 为脚手架，是一套大众化的前端自动化解决方案，他的核心是 webpack，框架是vue
 因为 vue-cli 核心是 webpack, 而 webpack 又依赖于 node 环境，所以前提还要安装 node.js （安装node的同时还会自动安装npm）

vue-cli 3 与 2 版本有很大区别
 vue-cli 3 是基于 webpack 4 打造，vue-cli 2 是 webpack 3
 vue-cli 3 的设计原则是 ’ 0 配置 ’ ，移除的配置文件目录下的 build 和 config 等目录
 vue-cli 3 提供了 vue ui 命令，提供了 可视化 配置，更加人性化
 移除了 static 文件夹，新增了 public 文件夹，并且 index.html 移动到 public 中

操作

1. 安装 vue-cli

npm install vue-cli -g //全局安装vue-cli
npm install @vue/cli -g //升级vue命令
vue -V //查看版本号

2. 创建项目

vue ui //可视化创建vue项目 (vue-cli 3)
或
vue init <templateName> <projectName> //用vue-cli初始化一个项目 (vue-cli 2)
或
vue create <projectName> //用vue-cli初始化一个项目 (vue-cli 3)

 vue create 创建过程视频

注：
这条命令相当于 创建好项目文件 -> npm init 初始化项目 -> npm i webpack -D ->并配置好配置文件
init：表示我要用vue-cli来初始化项目
templateName：表示模板名称，vue-cli官方为我们提供了5种模板
 webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
 webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
 browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
 browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
 simple-一个最简单的单页应用模板。
projectName：标识项目名称，这个你可以根据自己的项目来起名字。

例：

vue init webpack vue_demo //用webpack模板初始化一个名为vue_demo的项目

输入命令后，会跳出一下选项：
Project name (vue_demo)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母、
Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
Author ()： ----项目作者，默认计算机用户名
接下来会让用户选择：
vue build (Use arrow keys) 构建方式（暂且这么解释,上下箭头选择，回车即为选定）[两种模式区别详解视频](https://www.bilibili.com/video/BV1H7411j7Mc?p=95)
Runtime + Compiler:recommended for most users （运行+编译：被推荐给大多数用户）
Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY allowed in .vue files-render functions are required elsewhere
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。 建议选择 ‘N’ 因为选择 ‘Y’ 在做调试项目时,控制台会有很多 黄色警告 提示格式不规范,但其实并不影响项目
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，建议NO
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，建议NO

Runtime+Compiler 和 Runtime-only 两种模式区别视频讲解

效果

目录结构解析视频

cd vue_demo //进入vue_demo文件
npm install  //安装依赖包，也就是安装package.json里的包
npm run dev //启动项目

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