（总结）vue项目框架搭建_搭建vue框架-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49893750/article/details/114748692

本文详细介绍了使用Vue脚手架创建项目的过程，包括Element-UI的安装和使用，Vue路由的配置与懒加载，网络模块的封装，Vuex状态管理的实现，以及工具箱的创建。此外，还讲解了项目优化，如使用CDN加载资源，ElementUI的优化，首页内容定制，路由懒加载等。最后，阐述了项目上线的步骤，包括服务器配置、开启gzip和HTTPS服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 vue脚手架

1.1 安装插件

npm install -g @vue/cli

1.2 创建项目

vue create my-project

1.3 项目结构

在这里插入图片描述

2 Element-UI

官网地址为： https://element.eleme.cn/#/zh-CN

2.1 安装

npm i element-ui -S

2.2 导入资源

// 导入组件库
import ElementUI from 'element-ui'; 
// 导入组件相关样式 
import 'element-ui/lib/theme-chalk/index.css'; 
 // 配置 Vue 插件
Vue.use(ElementUI);

2.3 添加代码

<el-button type="primary">主要按钮</el-button>

3 vue路由

https://router.vuejs.org/zh/

3.1 安装

npm install vue-router

3.2 创建路由

3.2.1 创建文件

在src文件中创建router目录，目录创建成功后，创建index.js文件

3.2.2 引入模块

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

3.2.3 路由懒加载

const Home = () => import("../views/Home.vue");
const Login = () => import("../views/Login.vue");

3.2.4 创建Router

const router = new Router({
  routes: [
    { path: "/", component: Home },
    { path: "/login", component: Login },
  ],
});

3.2.5 导航守卫

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转

  if (to.path === "/login") return next();
  // 获取token
  const tokenStr = window.sessionStorage.getItem("token");
  if (!tokenStr) return next("/login");
  next();
});

3.2.6 导出

export default router;

3.3 引入路由

import router from "./router";
new Vue({ router, render: (h) => h(App) }).$mount("#app");

4，网络模块

4.1 下载axios

npm install axios

4.2 封装模块

src目录下面创建net文件夹

4.2.1 封装联网部分

在net目录创建ajax.js文件

1，引入模块

import axios from "axios";
import qs from "qs";

2，创建axios

const http = axios.create({
  baseURL: "http://localhost:9999",
  timeout: 1000 * 180,
});

3，设置拦截器

// 添加请求拦截器
http.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.r