vue3 vite与cli方式创建项目

一 vite方式创建

1.1 vite创建命令

npm init vite@latest
# 或者
yarn create vite

1.2 填写项目名称

1.3 选择架构框架

1.4 选择vue版本

这里我选择了ts版本

选择完后就开始创建vue3的项目

1.5 项目结构

创建好的项目结构如下

创建完毕的项目如果报错，需要npm i 下载依赖包

运行命令 npm run dev启动项目

PS D:\code\vite\vite_demo> npm run dev

> vite_demo@0.0.0 dev
> vite

Pre-bundling dependencies:
  vue
(this will be run only when your dependencies or config have changed)

  vite v2.7.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 282ms.

运行结果

1.6 修改vite配置文件

vite官网.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
plugins: [vue()],
resolve: {
   // 指定一个Object或Arrayof Object，它定义了用于替换importorrequire语句中的值的别名.
   // 支持正则表达式别名匹配。
   // 注意：大多数情况下不应以斜杠结尾。
   alias: {
   '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
   }
},
   // 开发服务器配置
   server: {
       port: 3000, // 设置服务启动端口号
       open: true, // 设置服务启动时是否自动打开浏览器
       // 是否开始https
       https: false,
       // 服务端渲染
       // ssr: false,
       // 代理：如果 key 值以 ^ 开头，将会被解释为 RegExp
       proxy: {
           //代理 api开头的请求
           '/api': {
           target: 'http://API网关所在域名',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^/api/, '')
           },
       }
   },
   // 项目打包目录
   build:{
     outDir: "dist"
   }
})

二 cli方式创建vue3项目

2.1 cli创建命令

全局更新cli

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

创建vue3项目

vue create projectname

警告

如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

如果报以下错误，去对应文件夹下删除.sp1文件即可

2.2 选择模板

选择vue3将创建官方模板

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

选择相应模块

创建完的项目结构如下：

多节点报错问题解决方案

解决vue3多个节点报错问题 (安装vetur插件)

The template root requires exactly one element.eslint-plugin-vue

将 eslint plugin Vue取消勾选