2_Vue 组件化开发

vue-cli

是什么

虽然前面讲了一堆知识，但是在面对生产开发时，需要一套好的开发工具，这样开发的复杂性便可以大大简化

vue-cli 是基于 node 环境的 进行快速开发的完整系统

我们使用 vue-cli 编写代码，文件是 .vue 形式的，而浏览器又不能识别该格式，故需要转化为 html 的形式，即 build 打包

---

安装

参照官网文档

https://cli.vuejs.org/zh/guide/installation.html

因此，使用此工具前必须确保你有安装 node

node -v

安装 vue-cli

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

你还可以用这个命令来检查其版本是否正确：

vue --version

---

创建一个项目

运行以下命令来创建一个新项目：

vue create demo3

选择插件，这里我们手动选择，enter确定

这里我们并不需要太多功能，选择Babel即可

选择的配置保存到哪里，这里选择保存到package.json即可

保存默认配置，这里选择no

创建完成后，终端界面

注意：这个地方可能提示是使用 npm，这是因为我用的是 yarn ，这两者是一样的，只是 npm 是自带的，如果你需要使用 yarn ，还需要单独安装 yarn，安装命令：npm install -g yarn，安装完成可以使用 yarn -v 查看版本。

另外就是 serve 命令是项目启动命令，这个命令后面我会说在哪里查看

项目结构

查看需要使用的命令

具体命令，取决于你使用的是 npm ，还是 yarn ，也可以在README.md中查看，以我使用的yarn为例

运行项目

进入到项目目录下

cd demo3

运行项目

 yarn serve

终端界面

访问：http://localhost:8082/ 即可，如果你是第一次使用，默认端口应该是 8080 ，我这里是因为 8080 和 8081被占用了

---

我第一次安装时，APP.vue并没有显示相应的图标，我这强迫症肯定是不允许它这样，安装 Vetur插件便可以解决

---

至此，Vue 项目创建便完成了！！！

---

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

步骤与命令行的方式一样

各部分使用方式

至此，图形化界面管理项目介绍完毕！！！

---

devtools 安装

vue 的一款调试工具，谷歌浏览器搜索 devtools 安装即可

效果如下

注意：

1. vue 必须引入开发版, 使用 min 压缩版是不能使用 devtools 进行调试的

2. 安装后, 需要关闭浏览器, 再重新打开, 才能使用

---