vue3创建项目
一 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配置文件
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取消勾选