传统工程的问题
- 兼容性问题
- 使用模块化会导致JS文件增加,从而导致传输文件数增加
- 直接使用原始代码会导致文件体积过大
- 使用第三方库很不方便
- 搜索
- 下载
- 引用js(某些第三方库可能没有ES6 模块化版本)
- vue模板书写在字符串中,没有智能提示,没有代码着色
- 难以把样式代码集成到vue组件中
- 其他诸多细节问题…
这些问题的本质是:开发的代码和运行的代码要求不同
所以,我们需要一个工具,它能够让我们舒舒服服的写代码,然后通过这个工具转换后,得到一个最适合运行的代码。
在vue中,这个工具就是vue-cli
![image-20200513101423046](https://i-blog.csdnimg.cn/blog_migrate/47cc6bddf9bbc7a0c22ffe404a63fbf6.png)
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 工程名
注意:工程名只能出现英文、数字和短横线