Vue学习(三)—使用脚手架创建工程

Vue学习—2020/8/20

传统工程问题

1. 兼容性问题
2. 使用模块化会导致JS文件增加，从而导致传输文件数增加
3. 直接使用原始代码会导致文件体积过大
4. 使用第三方库很不方便
   1. 搜索
   2. 下载
   3. 引用js(某些第三方库可能没有ES6模块化版本)
5. vue模板书写在字符串中，没有智能提示，没有代码着色
6. 难以把样式代码集成到vue组件中
7. 其他诸多细节问题…

这些问题的本质是：开发的代码和运行的代码要求不同

所以我们需要一个工具，然后通过这个工具转换后，得到一个最合适运行的代码

在vue中，这个工具就是vue-cli

vue-cli的安装

vue-cli是一个脚手架工具，它集成了诸多前端技术，包括但不仅限于：

• webpack
• babel
• eslint
• http-proxy-middleware
• typescript
• css pre-prosessor
• css module
• …

这些工具，它们大部分都要依赖两个东西：

• node环境：很多工具的运行环境
• npm：包管理器，用于下载各种第三方库

目前，npm已和node集成，当安装node后，会自动安装npm

安装node

下载node:https://nodejs.org/zh-cn

验证安装

打开终端，查看node和npm版本，验证是否安装成功”

node -v
npm -v

配置源地址

默认情况下，npm安装包时是从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置npm的源地址，使用下面的命令更改npm源地址为淘宝源

npm config set registry http://registry.npm.taobao.org/

更改好了之后，查看源地址是否被正确的更改

npm config get registry

安装vue-cli

使用下面的命令安装vue-cli工具：

npm install -g @vue-cli

安装好之后，检查vue-cli是否安装成功

vue --version

vue-cli的使用

在终端中进入某个目录

选择一个目录，该目录将放置你的工程文件夹

在终端中进入该目录

搭建工程

使用vue-cli提供的命令搭建工程

vue create 工程名

注意：工程名只能出现英文、数字和短横线

手动创建项目：

• Babel：处理兼容性，把高版本代码转化为低版本代码
• Linter/Formatter：代码本身没有问题，代码风格不一致，可取消选择