快速创建@vue/cli脚手架

►由于我们用webpack自己配置环境很麻烦，需要下载很多包,因此我们可以下载@vue/cli包,直接用vue命令创建脚手架项目；

►那么创建@vue/cli脚手架的好处是什么呢？

➜可以0配置webpack；babel支持；css、less支持；开发服务器支持；

►那接下来我们来讲讲脚手架是如何安装的：

➜目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

步骤一：安装脚手架：

1、全局安装命令：

yarn global add @vue/cli
# OR
npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c （停止重新来 or 换个网重新来）

 2、安装好之后可以查看vue脚手架的版本：

vue -V

总结: 如果出现版本号就安装成功, 否则失败；

例如：

步骤二：@vue/cli创建项目启动服务

☻注意：项目名不能带大写字母、中文和特殊符号（重要）

1、创建项目：

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2、选择模板：

可以上下箭头选择, 弄错了ctrl+c重来

 选择用什么方式下载脚手架项目需要的依赖包

 3、回车等待生成项目文件夹+文件+下载必须的第三方包们

 4、进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址 (或者按住ctrl键点击上述地址，也可直接打开浏览器)（"http://localhost:8080/"） 

步骤三：@vue/cli 目录和代码分析

我们创建好一个项目之后，打开会发现给我们生成了很多的文件夹，那这些文件夹都是干什么的？

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义：

node_modules  // 下都是下载的第三方包
public/index.html // 浏览器运行的网页
src/main.js – // webpack打包的入口文件
src/App.vue – // vue项目入口页面
package.json – // 依赖包列表文件

步骤四：@vue/cli 项目架构了解

 ➔目标: 知道项目入口, 以及代码执行顺序和引入关系

 总结：

»»» main.js和App.vue，以及index.html作用和关系？

↪1、main.js - 项目打包主入口 - Vue初始化；

↪2、App.vue - Vue页面主入口；

↪3、index.html - 浏览器运行的文件；

↪4、App.vue => main.js => index.html

步骤五：@vue/cli 自定义配置

 ➜目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js：

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000  // 自定义端口号
  }
}

步骤六：@vue/cli 单vue文件讲解

➜单vue文件好处, 独立作用域互不影响

创建好项目之后会发现我们有一个src/App.vue的文件夹(如下图：) 

 打开App.vue之后可以看到代码的结构如下、：

➜ Vue推荐采用.vue文件来开发项目

➜ template里只能有一个根标签；

➜ vue文件-独立模块-作用域互不影响；

➜ style配合scoped属性, 保证样式只针对当前template内标签生效；

➜ vue文件配合webpack, 把他们打包起来插入到index.html，然后在浏览器运行 ；

步骤七：@vue/cli 欢迎界面清理

➜ 我们开始写我们自己的代码, 无需欢迎页面；

1、src/App.vue默认有很多内容, 可以全部删除留下框：

如下图：

2、assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)  

到这里vue项目文件夹就创建好啦，我们就可以在里面开始写自己项目了！