webpack4+vue3.0+element-plus创建基于vue3的项目

原创

已于 2023-09-23 16:40:52 修改 · 4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-01-15 10:24:33 首次发布

本文详细介绍了如何使用webpack4和vue-cli3创建一个基于Vue3的项目，包括手动配置步骤、选择所需功能、安装依赖、添加配置文件以及设置CSS预处理器和代码格式化工具。此外，还展示了如何引入axios和element-plus库，并提供了项目中关于用户信息存储的工具类代码。最后，对.eslintrc.js进行了配置调整。

webpack4+vue3.0创建基于vue3的项目

1 安装vue vue-cli
2 创建步骤
3 加入依赖
- 3.1加入 axios
- 3.2 加入element-plus
4 添加配置文件

1 安装vue vue-cli

安装vue：

npm install vue

安装vue-cli：

npm install -g @vue/cli

2 创建步骤

创建过程图
在这里插入图片描述

2.1 创建命令

vue create blog-web

2.2 Please pick preset(选择预定配置）

Manually select features【选择手动配置】

2.3 Check the features needed for your project (选择你项目需要添加的功能)

Choose Vue Version
Babel
Router
Vuex
CSS Pre-processors
Linter / Formatter

2.4 Choose a version of Vue.js that you want to start the project with (选择项目使用的vue版本)

选择 3.x(Preview)

2.5 Use history mode for router? (路由是否使用 history模式)

输入n（拒绝）

2.6 Pick a CSS pre-processor ： (选择一个CSS预处理器)

选择Less

2.7 Pick a linter / formatter config (选择一个格式化配置)

选择：ESLint + Standard config

2.8 Pick additional lint features (选择代码格式检查时机)

选择： Lint on save 【代码保存时】

2.9 Where do you prefer placing config for Babel, ESLint, etc.?

选择：In dedicated config files

2.10 Save this as a preset for future projects? (是否保存这个预配置作为未来项目的模板)

输入：n

2.11 开始执行创建项目

3 加入依赖

3.1加入 axios

npm install axios --save

3.2 加入element-plus

npm install element-plus --save

注意：vueCli4创建项目安装element-plus，浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined：原因及解决方法
附：不能集成IView，原因和element-plus一样会报错，IView现有的版本暂不支持vue-cli@4创建的Vue3版本的项目。所以element-plus能支持真实万幸，哈哈哈。

4 添加配置文件

4.1 新增vue.config.js

const path = require('path')

const resolve = dir => {
   
   
  return path.join(__dirname, dir)
}

module.exports = {
   
   
  publicPath: './',
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  chainWebpack: config => {
   
   
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },
  productionSourceMap: false,

  devServer: {
   
   
    port: 9080,
    open: true,
    proxy: {
   
   
      '/blog-api': {
   
   
        target: 'http://localhost:9000/',
        //