首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3+vite创建项目

Vue3+vite创建项目方式

2024-12-26 14:40:21 作者：归途风景111

本文介绍了如何使用Vite创建Vue项目,包括版本升级、命令变化以及配置vue-router、Vuex和AntDesignVue的方法,同时,也提供了降级Vue CLI以兼容Vue2项目的步骤

项目创建

vite的介绍

首先要想使用vite来创建一个vue项目，要把vue脚手架升级成为5.0.1版本，但是有一个很大的缺陷，就是升级过后不会再向下兼容vue2的语法创建项目的方式

脚手架升级为5.0.1版本：cnpm install vue@next 或 yarn global add @vue/cli 安装新版@vue/cli

升级完之后，输入：vue -V 来查看脚手架的版本号

脚手架为5.0.1版本创建项目的语法也变了，原本在4.5.15版本的时候还可以做到向下兼容使用vue create demo来创建一个项目，但是在5.0.1版本时换了另外一种语法来创建项目，这时候你在用老版本的方法去创建项目时会说‘你的vue-cli已经过时了。请删除后重新手动运行vue-cli’

启动项目由npm run serveoryarn serve变成了npm run devoryarn dev，端口号由原来的8080端口换成了现在的3000端口

这是新页面：

这是老页面：

使用vite创建项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 npm：

npm init vite@latest '项目名称' --template vue
cd '项目名称'
下载依赖：npm install
启动项目：npm run dev

使用yarn：

yarn create vite  '项目名称' --template vue
cd '项目名称'
yarn
yarn dev

下图可以看到新建的项目结构与vue-cli4创建的项目结构基本一样，都是App.vue和main.js

查看main.js文件内容

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

发现创建Vue的方式变了，原来是new Vue来初始化Vue，但在Vue3.0中，修改为了通过createApp的方式；

vue3官网

配置项目

配置vue-router

Vue Router 4.0 ，变化请查看 Github 中完整的细节，

目前版本beta: v4.0.12, yarn 进行安装需要带上版本号

1、安装vue-router

yarn add vue-router@4.0.12
// or
npm install vue-router@next

2、安装完后配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

// import VueRouter from 'vue-router'
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
//   history: VueRouter.createWebHashHistory(),
//   routes, // short for `routes: routes`
// })

配置Vuex

Vuex 4.0 ，变化请查看Github

目前版本beta: v4.0.2

1、安装vuex

yarn add vuex@4
//或者
npm install vuex@next

2、安装完后配置vuex

在项目src目录下面新建store目录，并添加index.js文件，添加以下内容

import { createStore } from 'vuex'

interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
});

配置Ant Design Vue

具体使用方式请参考：官方文档

Ant Design Vue 新的ui网站

1、引入ant-design-vue

yarn  add ant-design-vue@next

2、在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router
// 整个应用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')

@vue/cli降级方法

如果你想写vue2的项目，那么就需要把@vue/cli给卸载掉，再重新下载指定版本

首先找到电脑上面的命令提示符（黑窗口）右键以管理员身份运行

查看当前版本：vue -V

卸载当前脚手架：npm uninstall -g @vue/cli
安装指定版本：npm install -g @vue/cli@版本号
这里我采用了 vue cli4 的最高版本4.5.15
命令为：npm install -g @vue/cli@4.5.15

成功后：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。