Vue 单组件入门

Vue基础入门

一、Vue脚手架

1. 简介

Vue 的脚手架（Vue CLI: Command Line Interface）是 Vue 官方提供的标准化开发平台。它可以将我们.vue 的
代码进行编译生成 html css js 代码，并且可以将这些代码自动发布到它自带的服务器上，为我们 Vue 的开发提供
了一条龙服务。脚手架官网地址：http://cli.vuejs.org/zh
注意：Vue CLI 4.x 需要 Node.js v8.9 及以上版本，推荐 v10 以上。

2. 脚手架安装步骤

1. 建议先配置一下 npm 镜像：
   1.1 npm config set registry http://registry.npm.taobao.org
   1.2 npm config get registry 返回成功，表示设置成功

2. 第一步：安装脚手架（全局方式：表示只需要做一次即可）
   2.1 npm install -g @vue/cli
   2.2 安装完成后，重新打开 DOS 命令窗口，输入 vue 命令可用表示成功了

3. 第二步：创建项目（项目中自带脚手架环境，自带一个 HelloWorld 案例
   3.1 切换到要创建项目的目录，然后使用 vue create vue_pro
   

这里选择 Vue2，
babel：负责 ES6 语法转换成 ES5。
eslint：负责语法检查的。
回车之后，就开始创建项目，创建脚手架环境（内置了 webpack loader），自动生成 HelloWorld 案例

4. 第三步：编译 Vue 程序，自动将生成 html css js 放入内置服务器，自动启动服务。
   4.1 dos 命令窗口中切换到项目根：cd vue_pro
   4.2 执行：npm run serve，这一步会编译 HelloWorld 案例
   

ctrl + c 停止服务。
4.3 打开浏览器，访问：http://localhost:8080

3. 认识脚手架结构

package.json：包的说明书（包的名字，包的版本，依赖哪些库）。该文件里有 webpack 的短命令：
serve（启动内置服务器）
build 命令是最后一次的编译，生成 html css js，给后端人员
lint 做语法检查的。

4. 分析 HelloWorld 程序

可以看到在 index.html 中只有一个容器。没有引入 vue.js，也没有引入 main.js
Vue 脚手架可以自动找到 main.js 文件。（所以 main.js 文件名不要修改，位置也不要随便移动）

5. 原理图