五、用脚手架搭建工程

五、用脚手架搭建工程

传统工程的问题

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

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

所以，我们需要一个工具，它能够让我们舒舒服服的写代码，然后通过这个工具转换后，得到一个最适合运行的代码。

在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 工程名

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

理解工程结构

npm run build 直接打包为最终dist可运行状态 npm run serve 内存中打包，适合开发环境

安装或拷贝工程

以后安装或者拷贝工程，不需要再拷贝node_modules,只需要把其他关键的部分拷贝，然后再工程目录下执行npm install就行了，会自动帮我们拷贝相关的引用

一个bug

程序通过脚手架启动之后，可能会报出下面的错误：

sockjs.js?9be2:1609 GET http://192.168.50.82:8080/sockjs-node/info?t=1621067851460 net::ERR_CONNECTION_REFUSED

原因: sockjs-node是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后，network会一直调用这个接口。如果没有使用，那么就一直会报这个异常。

解决办法： 1）找到/node_modules/sockjs-client/dist/sockjs.js文件 2）在1606行，注释掉self.xhr.send(payload);这一行，然后就可以解决了

Mr.Yan

Vue实战（五）-- 用脚手架搭建工程