vue3.0 vite,vite vue3插件配置
本文主要介绍用vite构建vue3应用的实现方法。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
一，安装
提示：目前还没有VUE3.0的官方翻译文档。但是已经有人翻译了。得到了尤雨溪大佬的称赞，这里附上https://v3.cn.vuejs.org/的网址
1.安装 cli
因为要使用vue3，cli的版本必须高于4.5.X
所以，如果没有安装cli，直接安装最新版本就好了，现有的可以升级或者卸载再重装。
最好是全局安装。
//全局安装
npm安装-g @vue/cli
#或者
yarn全局添加@vue/cli
//全局卸载
npm卸载-g vue-cli
#或者
纱线全局移除vue-cli
//升级cli
国家预防机制更新-g @vue/cli
#或者
yarn全球升级-最新@vue/cli
//检查本机cli版本
vue版本
2.创建项目
既然大家都用VUE3了，那就试试最新的vite构建工具吧。
也许它能为你打开新世界的大门。
//创建新项目
npm init vite-app asiterVue3
//输入目录
cd asiterVue3
//安装依赖项
npm安装
//运行
npm运行开发
3.检查项目
与VUE2.0相比，VUE3.0要简单得多。
而且main.js的那个变化非常明显。
VUE3.0
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；
“导入”。/index . CSS ；
createApp(应用程序)。挂载( # app )；
VUE2.0
从“Vue”导入Vue；
从导入应用程序。/App ；
vue . config . production tip=false；
新Vue({
埃尔： #app ，
组件：{ App }，
模板：“App/”，
});
其次，我们在看App.vue的时候，最明显的就是模板节点中并不是只有一个根节点。
//就是这个地方。虽然Vetur插件会报错，但不影响使用。
模板
img alt=Vue logo src=。/assets/logo.png /
Hello world msg= Hello Vue 3.0 Vite /
/模板
脚本
从导入HelloWorld。/components/HelloWorld.vue
导出默认值{
名称：“应用程序”，
组件：{
编译
}
}
/脚本
4.添加路由 Vue-Router
由于我们使用的是VUE3.0，我们的VUE路由器也应该是4.x .
npm安装vue-router@next -S
附件：
Npm安装vue-路由器将下载到版本3.0。
所以我们需要npm install vue-router@next -S进行安装。
这里附上github在https://github.com/vuejs/vue-router-next/releases.的地址
截至今天，2020年10月14日，版本为v4.0.0-beta.13
安装后，用不了怎么办？我们来看看官方的例子。
不行，我不能直接CV一波吧？
附件：
官方地址示例
https://codesandbox.io/s/vue-router-4-reproduction-hb9lh?file=/index.html
我只粘贴问题的主要部分。
脚本
const { createRouter，createWebHistory，createWebHashHistory }=vue router
const { createApp }=Vue
const Home={
模板：` divhome/div `，
}
const Foo={ template: div Foo/div }
const Bar={ template: div Bar/div }
const router=createRouter({
history: createWebHistory()，
路线：[
{路径：“/”，组件：Home }，
{ path:“/Foo”，组件：Foo }，
{ path:“/Bar”，组件：Bar }，
],
})
const app=createApp({})
app.use(路由器)
window . VM=app . mount(# app)
/脚本
这些是官方的例子。我们发现路线的创建有点不同。
Vue2.0是一个使用mode控制路由模式的参数。
但是在vue3中，路由实例是由createRouter创建的。
历史属性用作控制路由模式的参数。
顾名思义
CreateWebHistory方法返回历史模式。
createWebHashHistory方法返回哈希模式。
所以我们试着加了一下。
首先，在src目录下创建一个新的路由器文件夹，然后在该文件夹下添加一个index.js文件。
将以下内容添加到文件中
从“vue-router”导入{ createRouter，createWebHashHistory }；
导出默认创建路由器({
history: createWebHashHistory()，
路线：[
{
路径：“/weclome”，
组件：()=导入(./views/HelloWorld.vue )，
},
],
});
同时，在src下创建一个新的views文件夹，并添加一个HelloWorld.vue文件。
添加以下代码，因为这是第一次。其他API我就不试了。我们先来运行一个效果。
模板
迪夫哈洛沃。欢迎来到Vue3.0.Asiter/div
/模板
然后改造我们的App.vue
模板
路由器视图/路由器视图
/模板
脚本
导出默认值{
名称：“应用程序”，
组件：{}，
};
/脚本
最后，修改我们最重要的main.js文件，配置路由器。
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；
“导入”。/index . CSS ；
从导入路由器。/route ；
创建应用程序。使用(路由器)。挂载( # app )；
启动项目，在地址栏输入http://192 . 168 . 1 . 233:3000/#/we clome。
我们找到了我们想要的。
5.添加状态管理 Vuex
因为我们用的是VUE3.0，所以要对应支持的Vuex版本。
截至今天，它已经更新到4 . 0 . 0-beta 4
附件：
将github地址附加到https://github.com/vuejs/vuex/releases
npm i vuex@next -S
然后看看官方的案例，https://github.com/vuejs/vuex/tree/v4.0.0-beta.4
从“vuex”导入{ createStore }；
export const store=createStore({
state() {
返回{
计数：1，
};
},
});
和路由器一样，和VUE2相比，写的不一样。首先，用来自vuex的createStore创建一个实例。
然后我们会写一个。
在src目录下创建一个新的存储目录，然后添加一个index.js文件。写下以下内容
从“vuex”导入{ createStore }；
export const store=createStore({
state() {
返回{
作者：“阿斯特”，
描述：“一个拿着电影的少年”，
};
},
});
回到我们的main.js修改一下。添加vuex
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；
“导入”。/index . CSS ；
从导入路由器。/route ；
从导入{ store }。/store ；
创建应用程序。使用(路由器)。使用(存储)。挂载( # app )；
回到开头我们视图下的HelloWorld.vue文件。
改造它。
模板
迪夫哈洛沃。欢迎来到Vue3.0.Asiter/div
/模板
脚本
导出默认值{
已安装(){
Console.log(这个人是谁：，这个。$ store . state . author)；
Console.log(他怎么样：，这个。$ store . state . describe)；
},
};
/脚本
启动服务器
打开控制台。
在地址栏中重新输入http://192 . 168 . 1 . 233:3000/#/we clome。
查看打印信息。
这个人是谁：阿斯特？
他是什么样的人：一个有电影的少年？
6.总结
项目一开始就是这样。vue3还有很多好玩的地方。下次我们来看看VUE3的亮点Composition API的使用。(最近原神肝有点疼)
关于用vite构建vue3应用的实现方法，本文到此为止。关于用vite构建vue3的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。