vue3+vite搭建项目（一）

安装环境，打开命令行（win+r）

node -v

14.15.1

npm -v

6.14.8

安装v3脚手架

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

查看vue版本

vue -V

@vue/cli 5.0.8

安装vite

npm install vite –g

查看vite版本

vite -v

vite/2.9.14 win32-x64 node-v14.15.1

vue3+vite创建项目

Vite

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

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

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

$ cd 
$ npm install
$ npm run dev

创建启动demo项目

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

image.png

这边有人会奇怪，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

image.png