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

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 (选择你项目需要添加的功能)

1. Choose Vue Version
2. Babel
3. Router
4. Vuex
5. CSS Pre-processors
6. 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/',
        // ws: true,
        changeOrigin: true,
        pathRewrite: { // 将 blog-api 替换为空，即去掉 blog-api，例如：http://localhost:8080/blog-api/demo替换后为http://localhost:8080/demo
          '^/blog-api': ''
        }
      }
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  }
}

4.2 新增全局的配置文件【config/index.js】

export default {
  // 配置显示在浏览器标签的title
  projectTitle: '个人博客',
  cookieExpires: 365 * 24 * 60 * 60 * 1000, // 设置 365天
  // api请求基础路径
  baseUrl: {
    dev: ' http://localhost:9080',
    // pro：即线上的IP地址和端口，需要和nginx监听的地址、端口保持一致
    pro: 'http://localhost:8999'
  },
  // 默认打开的首页的路由name值，默认为home
  homeName: 'Home',
  // 需要加载的插件
  plugin: {
    'error-store': {
      showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
      developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
    }
  },
  prefixUrl: '/blog-api/'
}

4.3 新增存储用户信息的工具类【在utils文件夹下，新增cookie.js、localStorage.js】

4.3.1 localStorage.js

/**
 * localStorage 的封装工具类
 * @param params
 */
import config from '@/config'
const { cookieExpires } = config
// 设置缓存
export const setItem = (name, value) => {
  const obj = {
    name: name,
    value: value,
    expires: cookieExpires || false, // 如果没有设置过期时间，则设置成false
    startTime: new Date().getTime() // 记录何时将值存入缓存，毫秒级
  }
  if (obj.expires) { // 如果设置了过期时间，则以 obj.name 为 key，obj 为值放进去
    localStorage.setItem(obj.name, JSON.stringify(obj))
  } else {
    // 如果 obj.expires 没有设置，就判断一下value的类型
    const type = Object.prototype.toString.call(obj.value)
    // 如果value是对象或者数组对象的类型，就先用JSON.stringify转一下，再存进去
    if (type === '[object Object]') {
      obj.value = JSON.stringify(obj.value)
    }
    if (type === '[object Array]') {
      obj.value = JSON.stringify(obj.value)
    }
    localStorage.setItem(obj.name, obj.value)
  }
}
// 拿到缓存
export const getItem = (name) => {
  let item = localStorage.getItem(name)
  // 先将拿到的试着进行json转为对象的形式
  try {
    item = JSON.parse(item)
  } catch (error) {
    // 如果不行就不是json的字符串，就直接返回
    // item = item
  }
  // 如果有 expires 的值，说明设置了失效时间
  if (item !== null) {
    const currentTime = new Date().getTime()
    // 何时将值取出减去刚存入的时间，与item.expires比较，如果大于就是过期了，如果小于或等于就还没过期
    if (currentTime - item.startTime > item.expires) {
      // 缓存过期，清除缓存，返回false
      localStorage.removeItem(name)
      return false
    } else {
      // 缓存未过期，返回值
      return item.value
    }
  } else {
    // 如果没有设置失效时间，直接返回值
    return item
  }
}
// 移出缓存
export const removeStorageItem = (name) => {
  localStorage.removeItem(name)
}
// 移出全部缓存
export const clear = () => {
  localStorage.clear()
}

4.3.2 cookie.js

import { setItem, getItem, removeStorageItem } from '@/utils/localStorage'

export const TOKEN_KEY = 'token'
export const USER_INFO = 'userInfo' // 登录成功后获取到的用户信息【包括用户Id，角色，权限，头像】

// 存入token
export const setToken = (token) => {
  setItem(TOKEN_KEY, token)
}

// 取出token
export const getToken = () => {
  return getItem(TOKEN_KEY)
}

// 清空token
export const removeToken = () => {
  removeStorageItem(TOKEN_KEY)
}

// 存入用户信息
export const setUserInfo = (userInfo) => {
  setItem(USER_INFO, userInfo)
}

// 取出用户信息
export const getUserInfo = () => {
  return getItem(USER_INFO)
}

// 清空用户信息
export const removeUserInfo = () => {
  removeStorageItem(USER_INFO)
}

// 根据 key 清除localStorage数据
export const clearStorageItem = (name) => {
  removeStorageItem(name)
}

4.4 在main.js中全局引入 element-plus组件

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

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const vue3App = createApp(App)
vue3App.use(ElementPlus)

vue3App.use(store)
vue3App.use(router)
vue3App.mount('#app')

// createApp(App).use(store).use(router).mount('#app')

4.5 修改.eslintrc.js：增加配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0,
    'no-undef': 'off', // 不能有未定义的变量
    camelcase: 'off' // 关闭驼峰转换
  }

}