招商网网站建设方案中国建网站报价

目录

一、引言

二、Vue CLI 基本介绍

三、安装Vue CLI

3.1. 安装npm和yarn

3.2. 安装Vue CLI

3.3. 查看 Vue 版本

四、创建启动工程

4.1. 创建项目架子

4.2. 启动工程

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue 

---

一、引言

开发 Vue 的两种方式：

1. 核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发Vue。

    我们前面几个章节涉及到的就是传统的开发模式。

2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发Vue。

工程化开发模式问题：

① webpack 配置不简单

② 雷同的基础配置

③ 缺乏统一标准

二、Vue CLI 基本介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具，它解决了以往工程化开发模式的主要问题，生成标准化的配置，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

1. 开箱即用，零配置

2. 内置 babel 等工具

3. 标准化

Vue CLI脚手架创建出来的工程结构如下： 

三、安装Vue CLI

3.1. 安装npm和yarn

我本地是mac 安装方式如下（Windows系统可百度AI，这里不做赘述）

3.2. 安装Vue CLI

全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g

报下列错误，解决方式如下：

自动补充兼容 的命令
yarn config set ignore-engines true 

3.3. 查看 Vue 版本

vue --version

四、创建启动工程

4.1. 创建项目架子

到自己指定的路径下创建Vue CLI脚手架的工程

vue create project-name（项目名-不能用中文）

Vue版本根据自身情况选择，这几章节学习主要讲解Vue2，所以我这里选择了Vue2： 

创建好的工程结构图： 

4.2. 启动工程

进入到我们创建好的工程目录中

yarn serve 或 npm run serve（这两个命令会找package.json中的serve命令来启动，停止工程Ctrl+C）

注：如果我们日后将serve改为dev，那么启动时就要用yarn serve，我们改成什么值，后续启动就要用这个值。 

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue