如何从零开始搭建vue3项目.docxVIP

第

如何从零开始搭建vue3项目

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

npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts，此文章使用的是js。npminstall安装依赖。最后执行npmrundev运行项目。

运行过程时如果出现上图的报错信息，可以手动执行nodenode_modules/esbuild/install.js，然后再执行npmrundev

3.安装vue-router

执行npminstallvue-router@4,vue3对应的vue-router和vuex的版本都是4.0。执行命令安装完成之后,在目录下创建src/router/index.js写入下面的配置：

import{createRouter,createWebHistory}fromvue-router

constroutes=[

//...

exportdefaultcreateRouter({

history:createWebHistory(),

routes,

})

mAIn.js中使用

//...+

importrouterfrom./router/index

createApp(App).use(router).mount(#app)

vue-router4写法和以前的有些区别hash模式createWebHashHistoryhistory模式createWebHistory，具体可查看官网。

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

执行命令npmisass-D，然后在目录下创建src/styles/index.sCSS：

//@import./a.scss

//作为出口组织这些样式文件，同时编写一些全局样式

在mian.js中引入

import@/styles/index.scss

tips:vue3中样式穿透使用::deep(.className)或者deep(.className)

5.Elementplus按需引入和全局引入

执行npmielement3-S命令安装，如果你能用到里面的大多数组件，就用全局引入方式，如下：

//main.js

importelement3fromelement3

importelement3/lib/theme-chalk/index.css

createApp(App).use(router).use(element3).mount(#app)

如果你只用到几个组件，就可以按需加载优化性能，创建src/plugins/element3.js，如下

//按需引入plugins/element3.js

import{ElButton,ElMenu,ElMenuItem}fromelement3

importelement3/lib/theme-chalk/button.css

importelement3/lib/theme-chalk/menu.css

importelement3/lib/theme-chalk/menu-item.css

exportdefaultfunction(app){

app.use(ElButton)

app.use(ElMenu)

app.use(ElMenuItem)

//main.js中引用

importelement3from@/plugins/element3.js

createApp(App).use(router).use(element3).mount(#app)

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

//src/layout/index.vue

template

!--顶部导航--

Navbar/

!--页面内容部分、路由出口--

AppMain/

!--底部内容--

Footer/

/template

scriptsetup

importNavbarfrom./Navbar.vue

importAppMainfrom./AppMain.vue

importFooterfrom./Footer.vue

/script

根据自己的需求设计布局，使用Layout布局时，需要注意将Layout.vue作为