如何从零开始搭建vue3项目.docx
第
如何从零开始搭建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作为