搭建脚手架（vite）

npm和node的版本

npm和node版本需要大于6.14.8和14.15.1，查看方法

npm -v

6.14.8

node -v

14.15.1

安装v3脚手架

// 全局安装Vue3脚手架
npm install -g @vue/cli

// 全局卸载Vue3脚手架
npm uninstall @vue/cli -g

安装完毕后，输入

vue -V

有提示版本的则代表成功

提示 ：如果之前安装过2.x的脚手架，最好先删除了之后在安装

npm uninstall -g vue-cli

安装vite

安装

npm install vite –g

查看版本

vite -v

vue3+vite创建项目

Vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 npm：

# npm 6.x
$ npm init vite@latest project-name --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest project-name -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

创建启动demo项目

npm init vite@latest demo --template vue
$ cd demo
$ npm install
$ npm run dev

这边有人会奇怪，vite不是冷加载很快吗为什么安装依赖还是和以前一样啊，不是一回事哈，不要混淆。我们可以看到启动项目非常的快，这里vite就是按需加载和webpack有不一样，我这里用了352ms就启动了。这里我们发现不再是我们熟悉的8080端口了而是3000端口

接下来发现network不是ip+端口号，而是出现了Network: use --host to expose，说明无法通过ip+端口号访问到我们页面

不要慌，下面来讲。我们先打开vscode，你们随意

可以看到目录结构和之前还是有区别的，首先我们的入口页index.html不在当在public中了，其次就是不再是vue.config.js换成了vite.config.js，都是一些配置项，上面提到我们不能通过ip打开，我们就可以在这里配置

vite.config.js配置server