一个Vue3.0项目的搭建到开发（Vue3+Vue/cli4.x+ElementPlus+vue-router等）

最新推荐文章于 2024-03-15 17:27:37 发布
最新推荐文章于 2024-03-15 17:27:37 发布
阅读量1k 收藏 14
点赞数 1
分类专栏： 学习记录 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010827544/article/details/122241366
版权

最近稍微了解了点VUE的用法，也自己做了一个很简单的项目，这里记录一下项目的完整的开发过程，包括搭建，整合包，配置等，顺便一边记录一边重头搭一遍作为下一个练手项目的开始。

安装环境

Nodejs

安装Nodejs，自行下载安装并配置系统环境变量就行了，不过要注意下版本选择，目前我的node是16.4.1，执行一下node -v显示版本就代表安装和配置成功啦！
在这里插入图片描述

vue/cli

接下来安装vue脚手架，执行命令npm install -g @vue/cli安装或者使用淘宝镜像 cnpm install -g @vue/cli安装即可。新版的脚手架包名是@vue/cli（旧版是vue-cli），如果已经安装了旧版的可以通过npm uninstall vue-cli -g命令进行卸载，并重新安装。
等待安装完成，执行命令vue -V，显示vue/cli版本就代表安装成功了！（我已经安装过了，这里不截图安装过程了）
在这里插入图片描述

搭建一个Vue项目

安装好脚手架之后,使用命令进入准备创建项目的目录下,执行命令

vue create 项目名

之后会出现如下几个选项,上面两个是我前几次创建项目时候保存的配置,另外两个Default是默认的配置,这里我们选择最后一个,手动自定义选择(方向键+回车键就可以选择啦)
在这里插入图片描述
之后出现如下内容,根据实际项目需要进行选择,顺便贴一下每个代表的含义,从网上找的表格
在这里插入图片描述

序号选项描述
1Choose Vue version选择Vue版本
2Babelvue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5
3TypeScriptTypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
4Progressive Web App (PWA) Support渐进式Web应用程序（PWA）支持
5Router路由
6VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
7CSS Pre-processorsCSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
8Linter / Formatter格式化程序
9Unit Testing单元测试
10E2E Testing端到端（end-to-end）

这里我按照涂上选择的,美而有额外增加,反正后续也能选择自己安装
进入下一步,选择版本,选择3.x
在这里插入图片描述
紧接着会提示我们选择编码规则
在这里插入图片描述
ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard
ESLint + Prettier 使用 ESLint 官网推荐的规则 +Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具
我这里选择了第三个

在这里插入图片描述
之后选择Lint on save
在这里插入图片描述
询问在哪里保存配置,选择第一个单独的文件
最后会询问是否将此次的选项保存为一个默认配置,我这里选择的是N,因为前面也看到我保存过啦!
最后等待项目创建成功就OK啦!
在这里插入图片描述
创建成功之后,可以按照提示直接启动项目,也可以使用开发软件打开项目,便于查看项目结构,之后再根据实际情况安装其他的包

config

创建好的vue3.0项目中是没有vue.config.js的,可以自己在项目根目录下创建一个,这里我是在网上找的一个config文件,根据提示安装相应依赖包,同时可以修改输出目录名称,开发环境启动端口等配置

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");
const UglifyPlugin = require("uglifyjs-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");

/*需要npm或者yarn 安装两个第三方
	npm i -D  uglifyjs-webpack-plugin 或 npm yarn add -D  uglifyjs-webpack-plugin
	npm i -D  compression-webpack-plugin 或 yarn add -D  compression-webpack-plugin
*/

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: "./", // 基本路径
  outputDir: "AutoViceFront", // 输出文件目录
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  assetsDir: "static", //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  pages: undefined, // 以多页模式构建应用程序。
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
  // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require("os").cpus().length > 1,
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件，一般情况不建议打开
  // webpack配置
  //对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: (config) => {
    //修改文件引入自定义路径
    config.resolve.alias.set("@", resolve("src"));
    //修改项目标题
    config.plugin("html").tap(args => {
      args[0].title = "中石油副卡分配管理页";
      return args;
    });
  },
  //调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
      // 利用splitChunks将每个依赖包单独打包，在生产环境下配置
      // 开启gzip压缩
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: /\.ts$|\.html$|\.json$|\.css/,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      // 开启分离js
      config.optimization = {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `${packageName.replace("@", "")}`;
              }
            }
          }
        },
        minimizer: [
          new UglifyPlugin({
            uglifyOptions: {
              warnings: false,
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ["console.log"] // 移除console
              }
            }
          })
        ]
      };
      // 取消webpack警告的性能提示
      config.performance = {
        hints: "warning",
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 ts 文件的性能提示
        assetFilter: function(assetFilename) {
          return assetFilename.endsWith(".ts");
        }
      };
    } else {
      // 为开发环境修改配置...
      config.mode = "development";

      config.optimization = {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `${packageName.replace("@", "")}`;
              }
            }
          }
        }
      };
    }
  },
  // css: {
  //   // 启用 CSS modules
  //   requireModuleExtension: false,
  //   // 是否使用css分离插件
  //   extract: true,
  //   // 开启 CSS source maps，一般不建议开启
  //   sourceMap: false,
  //   // css预设器配置项
  //   loaderOptions: {
  //     sass: {
  //       prependData: `@import "@/styles/global.scss";`,
  //     },
  //   },
  // },
  pwa: {}, // PWA 插件相关配置
  // webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/
  devServer: {
    host: "0.0.0.0",
    port: 9000, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器  http://172.11.11.22:8888/rest/XX/
    hotOnly: true, // 热更新
    proxy: "http://localhost:8000" // 配置跨域处理,只有一个代理
    /*proxy: {
      //配置自动启动浏览器
      "/api": {
        target: "http://172.16.68.134:8089",
        changeOrigin: true,
        // ws: true,//websocket支持
        secure: false
      },
      "/api1": {
        target: "http://172.16.68.134:8089",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false
      }
    }*/
  },
  // 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
  pluginOptions: {}
};

启动项目之后,显示如下内容表示启动成功
在这里插入图片描述

整合vue-router

项目搭建好之后开始安装一些开发必要的包,首先是vue-router,使用npm进行安装,不指定版本则默认安装新版本

npm install vue-router

安装成功之后,创建路由文件文件src/router/index.js,内容大致如下

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/pages')
  },
  {
    path: '/test1',
    name: 'test1',
    component: () => import('@/pages/test1')
  },
  {
    path: '/test2',
    name: 'test2',
    component: () => import('@/pages/test2')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: routes
})
export default router

之后修改默认的main.js为如下内容,引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

之后就可以在项目中使用router啦!实现路由跳转!

整合Element-plus

Element-ui已经针对Vue3.0推出了Element-plus,安装和使用时会有些许不同,我因为前端确实不太熟,我也记不太清2.0的用法了,这里记录一下3.0的整合用法吧!
这部分参考的是官网的指引,首先是安装

npm install element-plus --save

之后修改main.js引入即可,也可以参考前面的指引使用按需导入等方式

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

后面就可以使用啦,大致用法相同,遇到不会的直接去查官方的组件文档就OK啦!
这里有个坑,就是在vue.config.js中如果配置了css分离插件之类的东西,会导致element的ui不生效!在我另一篇博客里面有记录!

整合axios

接着装一个axios

npm install axios

为了后续接口整合方便,我们可以使用axios封装一个请求工具request.js

/**
 * 封装一个axios,
 * 拦截器和请求的公共参数之类的
 */
import axios from "axios";

let baseURL = '后端请求地址'

//创建axios实例
export function request(config) {
    const instance = axios.create({
        //配置公共请求地址
        baseURL: baseURL,
        timeout: 10000
    });
    //请求拦截器
    instance.interceptors.request.use(request => {
            return request;
        }, error => {
            console.log(error);
            return Promise.error(error);
        }
    );
    //响应拦截器
    instance.interceptors.response.use(response => {
        console.log(response);
        return response.data;
    }, error => {
        switch (error.response.status) {
            case 401:
                console.log("响应401,无权访问");
                break;
            case 403:
                console.log("响应403,授权过期");
                break;
            case 404:
                console.log("响应404,NOT FOUND");
                break;
            case 500:
                console.log("响应500,系统异常");
                break;
            default:
                return Promise.reject(error);
        }
        return Promise.reject(error);
    });
    return instance(config);
}

export default request;

之后可以根据此请求工具封装一下各HTTP请求方式api.js

/**
 * 根绝封装的request,整合一个接口请求工具
 */
import request from "./request";

const api = {
  get(url, params) {
    const config = {
      method: "get",
      url: url
    };
    if (params) {
      config.params = params;
    }
    return request(config);
  },
  post(url, params) {
    const config = {
      method: "post",
      url: url
    };
    if (params) {
      config.data = params;
    }
    return request(config);
  },
  put(url, params) {
    const config = {
      method: "put",
      url: url
    };
    if (params) {
      config.data = params;
    }
    return request(config);
  },
  delete(url, params) {
    const config = {
      method: "delete",
      url: url
    };
    if (params) {
      config.params = params;
    }
    return request(config);
  }
};
export default api;

将以上封装好之后,后续整合后端接口只需定义一个function,引入api,再根据接口规则进行调用即可,如下示例

import api from "../utils/api";
export function apiTest(param){
	return api.post("xxx/yyy/zzz",param);
}

至此!一个简单的vue3.0项目整合完成,后续可以进行开发啦!开发过程中遇到什么再进行添加整合就好啦!

KimiKudo
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
vue3.x+vite+ts+vue-router@4.x 路由使用demo，可供学习使用，也可在此基础上写项目
Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置（一）
07-27
Vue2+vue-cli+vue-router+vuex +elementUI/vant完整项目搭建 项目和配置（一）
vue3项目实战+element-plus
m0_46685484的博客
08-28 792
采用Vue3+element-plus+axios+vue-router+sass……（目前刚开始是用到了这些,随着开发慢慢更新）
Vue3入门
最新发布
沉梦听雨的博客
03-15 1457
Vue3 在 Vue2 的基础上引入了 `Typescript` 重构了大量的代码，增加了很多新的特性，并发布了新一代的工程化工具 vite 。这些新的改动，让 Vue3 对我们的研发变得更加友好。
❤ 15个基于Vue3.0全家桶的优秀开源项目
林太白
07-03 5046
❤ 15个基于Vue3.0全家桶的优秀开源项目
Vue学习之使用HBuilderX创建并使用vue3.0项目
qq_38527427的博客
02-01 2758
本文简述HBuilderX中如何使用vue3.0项目
Vue3项目实战开发
weixin_42533732的博客
09-04 3144
vue3基础理论、vue3的项目从0开始搭建、vue3的项目实战
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 5万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
基于Vue3 + Element Plus 的后台管理系统详细教程
一步一个脚印，踏实努力，向着目标前进
06-13 2万+
以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue-cli3.0-vueadmin：基于vue-cli3.0 + vue + elementUI + vuex + axios +权限管理的后台管理系统
02-06
项目基于vue-cli3.0进行构建，并使用了vue全家桶vue vuex axios vue-router elementui，增加了按钮级别的权限控制 脚手架版本： * vue-cli-3.0 用到vue相关的生态链模块： vue vue-router vuex axios 项目要点 ...
vue3使用原生input[type=‘file‘]上传文件
LOG的博客
05-28 8038
html页面 使用原生input[type=‘file’]，并绑定@change事件，当侦测到该元素选择的文件发生变化时触发上传文件事件 <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required @change="changeFile"> 常用属性 accept（限制可用文件类型）。 比如限制只能上传jpg或pngaccept="image/png, image/
Vue3项目完整开发流程
weixin_66060122的博客
11-01 2683
Vue3项目完整开发流程
vue3.0项目搭建全过程
qq_35776479的博客
04-28 4798
vue3.0项目搭建
NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入
书启鸿蒙知秋枫
02-08 2628
NodeJS各个历史版本下载NodeJS16.18.1下载地址​node_cache​。
vue3.0项目搭建详解
小道士写程序
11-24 1035
介绍 在搭建vue3.0之前，我们首先来收悉一下vue3.0相比vue2.0做了那些改进，增加了那些特性。 vue3.0相比vue2.0改进和新特性如下： 1.相比于vue2.0，性能有了明显的提升；（据作者透露有了30%-300%的性能提升） 2.相比于vue2.0，打包体积明显的缩小；采用Tree-shaking support将无用模块剪辑，仅打包需要的，大大降低了打包的体积； 3.暴露了自定义渲染api，增加了可扩展性； 4.底层完...
Vue3.0项目搭建
Anony_me的博客
11-30 414
Vue3.0项目搭建 新建文件夹，在文件夹路径中，cmd进入命令窗口 1.查看node.js版本号，输入node -v回车，没有安装的话参考node.js官网https://nodejs.org/zh-cn/download/ 2. 查看vue-cli版本号,输入vue -V回车，没有安装vue-cli的话进行安装cnpm i -g @vue/cli，如果之前安装过vue-cli，你需要把2.0相关的删除cnpm uni -g vue-cli 3. 新建项目名称，vue create 项目名称直接回车
vue3.0 elementplus项目实战
10-13
对于vue3.0和elementplus的项目实战，可以按照以下步骤进行： 1. 安装Vue CLI 4.x版本：可以通过npm install -g @vue/cli命令进行安装。 2. 创建Vue3.0项目：可以通过vue create命令创建项目，选择Manually select features选项，勾选Vue3、Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter等选项。 3. 安装Element Plus：可以通过npm install element-plus命令进行安装。 4. 引入Element Plus：在main.js中引入Element Plus的样式和组件库。 5. 编写页面代码：根据需求编写页面代码，可以使用Element Plus提供的组件。 6. 运行项目：使用npm run serve命令运行项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值