【前端 · 初学】使用Vue3快速搭建一个网站框架

1. 新建一个vue3的前端项目

   • 开发工具创建
   • npm create vue 项目名称

2. 给当前项目安装第三方框架

   • UI框架：npm i element-plus

   • 路由框架：npm i vue-router

   • web请求：npm i axios

   • 检查安装：

     • 命令行终端使用npm ls
     • 在package.json文件中查看

3. 修改main.js，将createApp(App).mount('#app')改成const app=createApp(App) app.mount('#app')

4. 将element-plus加入到vue实例对象中

   • 导入

     // 导入第三方框架
     import ElementPlus from 'element-plus'
     // 导入 element-plus 样式
     import 'element-plus/dist/index.css'
     

   • 挂载 app.use(ElementPlus)

5. 路由

   • 在src新建一个router目录，新建一个router.js文件

     // 1 导入所需方法
     // 站点的路由文件，写完后需要在 main.js 中导入、引用
     import {createRouter,createWebHistory,createWebHashHistory} from "vue-router";
     // 异步加载组件
     import {defineAsyncComponent} from "vue";
     
     // 2 构建路由规则
     const myRoutes=[]
     
     //3 创建路由对象
     const router=createRouter({
         history:createWebHistory(),
         // history:createWebHashHistory(), //上面一行和这行二选一
         routes:myRoutes
     })
     
     //4 加入导航守卫
     // 前置
     router.beforeEach(async (to, from,next) => {
         next()
     })
     
     //5 导出路由对象
     export default router
     

   • 在main.js加入路由对象router.js

     import router from './router/router.js'
     // 将路由对象加到全局vue实例对象上
     app.use(router)
     

   • 在App.vue中去掉原HelloWorld内容，加入<router-view></router-view>

6. axios配置，web请求

   • 在src中新建utils目录，在utils目录中新建requestApi.js
   • 在requestApi.js文件中导入axios框架