vue3项目的创建

简介: vue3项目的创建

1.vue3环境搭建

       1>对于 Vue 3,你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级,你应该需要全局重新安装最新版本的 @vue/cli:

# 全局安装 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli

2>安装完后查看版本:

$ vue --version
@vue/cli 4.5.11

3>然后在 Vue 项目中运行:

vue upgrade --next

       4>

注意:vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令,如果你之前已经安装了 vue-cli 2.x,它会被替换为 Vue-cli 3.x。

安装 @vue/cli-int:

cnpm i -g @vue/cli-init

2.vue3环境搭建好以后配置


       1> vue create 项目名字(或者vue init webpack 项目名字)


       2>选择Default (Vue 3) ([Vue 3] babel, eslint),也可以选择第三个自定义创建


               下载好以后


       3>路由下载npm install vue-router@4


               在src目录下新建router文件夹,在文件夹内新建index.js文件和routes.js文件


       routes.js

相关文章
|
7天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
18天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
32 2
|
18天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
24 2
|
18天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
52 1
|
18天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
26 1
|
18天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
26 1
|
18天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
85 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
12天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
8 0