使用vite创建vue3应用

vite是新一代前端构建工具，能够实现根据开发进度按需编译。而且启动速度快， 支持热重载。

vite的官网地址是https://vitejs.cn/

安装最新版的nodejs

要使用vite，需要提前安装最新版的nodejs。安装方法见https://nodejs.org/en/download/package-manager/current

也可以通过nvm(Node Version Manager node版本管理器)安装nodejs，nvm的安装方法见https://github.com/nvm-sh/nvm

步骤如下：

1.下载脚本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Windows版本直接下载nvm-setup.exe,下载地址是https://github.com/coreybutler/nvm-windows/releases/

2.加载脚本

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 

3.安装nodejs

现在已经可以在命令行中使用nvm命令了。通过nvm安装最新版的nodejs.

nvm install node # 安装最新版本
nvm use node    # 使用最新版本

创建vite+vue3项目

安装好了最新版的nodejs后，可以通过https://cn.vuejs.org/guide/quick-start#creating-a-vue-application 介绍的方法创建vue3项目了。具体操作如下：

1.创建命令

npm create vue@latest

2.具体配置

## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

安装完成后，会显示安装成功，并提示下一步操作：

Done. Now run:

  cd vue-practice
## 安装项目依赖
  npm install
## 启动项目
  npm run dev

3.安装依赖

安装依赖前要先进入项目目录

##进入项目目录  
cd vue-practice
## 安装项目依赖
  npm install

4.启动项目

npm run dev

根据提示进行操作，通过 npm run dev可以启动vue的欢迎页面。

5.修改配置（可选）

如果是在远程服务器上进行开发，需要对vite.config.ts做一些修改。在defineConfig中增加server配置项。

export default defineConfig({
//增加server配置，host指定可访问的地址，port指定访问端口。
//注意配置后的逗号不要漏了
  server: {
    host: '0.0.0.0',
    port: 8088
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})