vue3.0搭建项目,新建一个vue3.0项目

　　VUE3用了很长时间开发，但一直没有总结和记录。下面这篇文章主要介绍从零开始构建vue3项目的相关信息。通过图文非常详细的介绍，有需要的朋友可以参考一下。

　　指令开始1。使用vscode开发工具安装vue3插件Volar。在vue2中，我们使用Vetur。2.执行初始化和安装命令：3 .安装vue-router4。安装全局style和sass(使用@ path时需要配置别名，后面会解释)5。按需在全球范围内引入elementplus。6.布局布局，创建文件src/layout/index.vue7. axios请求包8。环境变量相关9。vite中别名配置的摘要。

说明

　　记录一次Vue3项目的施工过程。基于vue3.2.6和vite2.51，本文使用了ui库Element plus、vue-router4、布局封装、axios请求封装、别名配置等。

开始

1. 使用 vscode 开发工具安装vue3的插件 Volar ，在vue2中我们使用的是Vetur。

　　Vue3在线代码工具门户sfc.vuejs.org/

2. 执行初始化及安装命令：

　　初始化vite。在这个过程中，您可以输入项目名称，选择vue/react项目和js/ts环境。vue3已经完全支持ts，本文使用js。npinstall安装依赖于。最后，npm运行dev运行该项目。

　　如果在运行时出现上图的错误信息，可以手动执行node node _ modules/es build/install . js，然后执行npm run dev。

3. 安装vue-router

　　执行NPM安装vue-router @ 4，vue3对应的vue-router和vuex版本都是4.0。命令执行和安装完成后，在目录中创建src/router/index.js，并编写以下配置：

　　从“vue-router”导入{ createRouter，createWebHistory }

　　常量路由=[

　　//.

　　]

　　导出默认创建路由器({

　　history: createWebHistory()，

　　路线，

　　})

　　在main.js中使用

　　//.

　　从导入路由器。/路由器/索引

　　createApp(应用程序)。使用(路由器)。挂载(#app)

　　vue-router4的写法和之前的不太一样。哈希模式CreateWebHashHistory模式createWebHistory模式。详见官网。

4. 全局样式及sass安装（使用@路径需要配置别名，后文有相应的说明）

　　执行命令npm i sass -D，然后在目录中创建src/styles/index.scss:

　　//@import。/a . scss ；

　　//将这些样式文件组织成一个导出，同时编写一些全局样式。

　　在mian.js中介绍

　　导入“@/styles/index.scss”

　　tips:Vue3风格渗透使用：深(。类名)或深度(。类名)

5. Element plus按需引入和全局引入

　　执行npm i element3 -S命令进行安装。如果您可以使用其中的大多数组件，请使用全局导入方法，如下所示：

　　//main.js

　　从“element3”导入element 3；

　　导入“element 3/lib/theme-chalk/index . CSS”；

　　createApp(应用程序)。使用(路由器)。使用(元素3)。挂载(#app)

　　如果您只使用几个组件，您可以按需加载它们以优化性能，并创建src/plugins/element3.js，如下所示

　　//根据需要引入插件/element3.js

　　从“element3”导入{ ElButton，ElMenu，ElMenuItem }

　　导入 element 3/lib/theme-chalk/button . CSS

　　导入 element 3/lib/theme-chalk/menu . CSS

　　导入 element 3/lib/theme-chalk/menu-item . CSS

　　导出默认功能(应用程序){

　　应用程序使用(按钮)

　　应用程序使用(ElMenu)

　　app.use(ElMenuItem)

　　}

　　//main . js中的引用

　　从“@/plugins/element3.js”导入element3

　　createApp(应用程序)。使用(路由器)。使用(元素3)。挂载(#app)

6. Layout布局，创建文件src/layout/index.vue

　　//src/layout/index.vue

　　模板

　　！-顶部导航-

　　导航条/

　　！-页面内容部分，路由出口-

　　AppMain /

　　！-底部内容-

　　页脚/

　　/模板

　　脚本设置

　　从导入导航栏。/Navbar.vue

　　从导入AppMain。/AppMain.vue

　　从导入页脚。/Footer.vue

　　/脚本

　　根据自己的需求设计版面。使用layout布局时，需要注意以Layout.vue作为父路由。路线设计大概如下：

　　//src/路由器/index.js

　　从“vue-router”导入{ createRouter，createWebHistory }

　　从“@/layout/index.vue”导入布局

　　从“@/views/home/Home.vue”导入个人主页

　　从“@/views/test/Test.vue”导入测试

　　常量路由=[

　　{

　　路径：“/”，

　　组件：布局，

　　子级：[{ path: ，component: Home }]，

　　{

　　路径：“/test”，

　　组件：布局，

　　子级：[{路径： ,组件：测试}],

　　]

　　导出默认创建路由器({

　　history: createWebHistory()，

　　路线，

　　})

7. axios请求封装

　　执行命令npm i axios安装爱可信

　　新建src/utils/request.js，在此文件中进行封装爱可信

　　从" axios "导入爱可信

　　//可以导入元素加的弹出框代替警报进行交互操作

　　//创建爱可信实例

　　const service=axios.create({

　　基本URL:导入。meta。环境。vite _ APP _ base URL，//使用设置好的全局环境

　　超时：30 * 1000,//请求超时

　　})

　　//请求拦截器

　　服务。截击机。请求。使用(

　　（配置)={

　　//此处可以执行处理添加代币等逻辑

　　//config。headers[ Authorization ]=getToken()；

　　返回配置

　　（错误)={

　　console.log(错误)

　　退货承诺。拒绝（错误)

　　}

　　)

　　//响应拦截器

　　服务。拦截器。响应。使用（

　　（响应)={

　　const res=response.data //根据接口返回参数自行处理

　　if (res.code！==200) {

　　if (res.code===50000) {

　　//根据状态码自行处理

　　警报(服务器内部出现异常，请稍后再试)

　　}

　　回报承诺。reject(新错误(RES . msg Error ))

　　}否则{

　　//调用成功返回数据

　　返回承诺。解决(分辨率)

　　}

　　（错误)={

　　console.log(err 错误)//出现异常的处理

　　退货承诺。拒绝（错误)

　　}

　　)

　　导出默认服务

　　新建src/api目录，可以每个模块或每个页面单独建立一个射流研究…文件，方便管理维护api。此处示例，新建src/api/home.js文件，写入代码

　　//引入封装好的请求。射流研究…

　　从" @/实用工具/请求"导入请求

　　导出函数获取列表（查询){

　　退货请求({

　　URL:“/list”，

　　方法：“得到”，

　　参数：查询，

　　})

　　}

　　在home.vue中使用

　　脚本设置

　　从" @/api/home.js "导入{ getList }

　　常量查询={ pagenum: 1 }

　　获取列表（查询)。然后((res)={

　　console.log(res) //调用成功返回的数据

　　})。错误((err)={

　　console.log(err) //调用失败要执行的逻辑

　　})

　　/脚本

8. 环境变量相关

　　项目根目录下创建三个文件。环境生产生产环境。环境发展开发环境环境暂存测试环境，分别加入下面的代码，在不同的编译环境下，打包时自动执行当前环境下的代码

　　# .env.production

　　VITE _ APP _ base URL=https://www。生产。API/

　　# .env.development

　　VITE _ APP _ base URL=https://www。测试。API/

　　# .env.staging

　　VITE _ APP _ base URL=https://www。测试。API/

　　使用：

　　控制台。日志(导入。meta。环境。vite _ APP _ base URL)

　　//在不同编译环境下控制台会输出不同的全球资源定位器(统一资源定位器)路径

　　在package.json中通过传递-模式选项标志来覆盖命令使用的默认模式

　　脚本:{

　　dev: vite ，

　　构建：登台:邀请构建模式登台，

　　构建：生产:邀请构建模式生产，

　　"服务":"邀请预览"

　　这样，生产环境打包执行新公共管理运行构建：生产，测试/预发布环境打包新公共管理运行构建：阶段

9. vite中别名配置

　　根目录下vite.config.js文件添加代码

　　从“维特”导入{ defineConfig }

　　从@vitejs/plugin-vue 导入某视频剪辑软件

　　从"路径"导入{解决}

　　//https://vitejs.dev/config/

　　导出默认定义配置({

　　插件：[vue()]，

　　解决：{

　　别名：[{ find: @ ，replacement: resolve(__dirname， src) }]，

　　基底：。/,

　　})

　　更多配置项查看官网

总结

　　到此这篇关于从零开始搭建vue3项目的文章就介绍到这了，更多相关vue3项目搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

说明

开始