创建vue3项目及基本常用配置

1、创建vue3项目

1.1 创建vue3项目

确保电脑中安装了nodejs，新建文件夹，输入以下命令：

javascript 复制代码

npm create vue@latest

看是否为自己需要的vue版本，选择Y

各配置具体如下，根据自己的需求选择是或者否

javascript 复制代码

npm create vue@latest
Need to install the following packages:
  create-vue@3.10.2
Ok to proceed? (y) y
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vue@3.10.2',
npm WARN EBADENGINE   required: { node: '>=v16.20.0' },
npm WARN EBADENGINE   current: { node: 'v16.17.0', npm: '8.15.0' }
npm WARN EBADENGINE }

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... practice-vue3
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ >> 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

将应用发布到生产环境时，运行以下命令：

javascript 复制代码

npm run build

此命令会生成一个dist文件夹，用于生产环境

2、应用配置

在main.js中定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

javascript 复制代码

import vueErrorHandler from '@/utils/errorHandler'
app.config.errorHandler = vueErrorHandler

3、引入Element-UI

先安装element，然后在main.js中引入

javascript 复制代码

npm i element-plus --save

在main.js中引入（全局注册）并使用

javascript 复制代码

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

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

注意：element plus 的图标需要单独安装引入：

javascript 复制代码

//安装
npm install @element-plus/icons-vue

//全局引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
const app = createApp(App)
 
// 注册所有图标为全局组件
Object.keys(ElementPlusIconsVue).forEach((iconName) => {
  app.component(iconName, ElementPlusIconsVue[iconName])
})

4、安装scss

javascript 复制代码

npm install -D sass

在vue组件中使用：

css 复制代码

<style lang="scss">
.example {
  color: blue;
  font-size: 20px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  .img{
      width: 20px;
  }
}
</style>

全局SCSS样式，可以在vite.config.js文件中配置：

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

vue3中scss样式穿透：

css 复制代码

.elinput{
    :deep(.el-input__inner) {
         height: 38px;
    }
}

5、安装加密工具

需要先安装jsencrypt，主要用于账号密码登录对密码加密

javascript 复制代码

//安装命令
npm install jsencrypt

在utils中新建js文件jsencrypt，内容如下

javascript 复制代码

import { JSEncrypt } from 'jsencrypt'
export default function jsencrypt(data) {
  const encryptor = new JSEncrypt()
  const publicKey =
  `-----BEGIN PUBLIC KEY-----
  MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs+s4mRTS8FQQo3z5ImgEDZ0xD
  OjqWGOJJAwwBK+P/BKbvoOiBBvnE2yGD5FN398zh7xS1QNQDGXpUS/qTpA6WLYDJ
  r3/rMINRQGr5P5OnypYnJbJwzVgHQDf3sMH5me9LsO+Z1ZuEQT8mvA98vCQ6+z9a
  Ac1e4RxMG+A2+266qQIDAQAB
  -----END PUBLIC KEY-----
  `

  // 设置公钥
  encryptor.setPublicKey(publicKey)// publicKey为公钥
 
  return encryptor.encrypt(data)// data就是需要加密的密码
}

在需要使用的组件中引入jsencrypt,js

javascript 复制代码

//引入
import jsencrypt from "@/utils/jsencrypt.js";

//使用
password: jsencrypt(this.signInFormData.password)

6、封装axios

6.1 安装并封装request

需要先安装axios

javascript 复制代码

npm install axios

在utils下创建文件request.js

配置内容如下：

javascript 复制代码

import { getToken } from '@/utils/auth';
import axios from 'axios';
import { Message } from 'element-ui';

if (import.meta.env.MODE === 'production') {
  const origin = window.location.origin
  const { serveIp, serveUrl, userCenterIp } = window.config
  window.config.serveIp = `${origin}${serveIp}`
  window.config.serveUrl = `${origin}${serveUrl}`
  window.config.userCenterIp = `${origin}${userCenterIp}`
  // window.config.redirectUrl = origin
}
// create an axios instance
const service = axios.create({
  baseURL: window.config.serveUrl,
  timeout: 600000 // request timeout
})
// 存储的HTTP请求
const pending = []
const cancelToekn = axios.CancelToken
let removeP = false
const removePending = (config, isAll) => {
  for (let i = 0; i < pending.length; i++) {
    if (isAll) {
      pending[i].fun()
      pending.splice(i, 1)
      i--
    } else {
      if (pending[i].name === config.url + JSON.stringify(config.data) + '&' + config.method) {
        pending[i].fun()
        pending.splice(i, 1)
        break
      }
    }
  }
}
// request interceptor
service.interceptors.request.use(
  config => {
    // 在HTTP请求前取消前面的所有请求
    removeP = config.removeP
    if (removeP) removePending(config, true)
    // 记录本次HTTP请求
    // eslint-disable-next-line new-cap
    config.cancelToken = new cancelToekn((c) => {
      pending.push({
        name: config.url + JSON.stringify(config.data) + '&' + config.method,
        fun: c
      })
    })
    // do something before request is sent
    if (getToken()) {

    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
let errNum401 = 0
let errNum403 = 0
// let errNum404 = 0
// response interceptor
service.interceptors.response.use(

  response => {
    const data = response.data
    const codeList = [200, 201]
    if (!codeList.includes(data.code)) {
      switch (data.code) {
        case 401:
          
          break
        case 402:
          // 找不到资源
          break
        case 403:

          if (errNum403) {
            break
          }
          errNum403++
          // Message.error(data.msg)
          break
        case 404:

          break
        case 407:
          // 没有权限
          break
        case 502:
          // 连接服务器失败
          break
      }
    }
    return data
  },
  error => {
    console.log(error, 'error')
    if (error.response) {
      console.log('err' + error.response) // for debug
      switch (error.response.status) {
        case 401:

          break
        case 400:
          error.message = '请求错误'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 422:
          Message.error('参数错误')
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          // 连接服务器失败

          Message.error('服务器内部错误')
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
          error.message = '连接服务器异常'
      }
      return error
    } else {
      if (removeP) {
        return
      }
      error.message = '连接服务器失败'
      Message.error('连接服务器失败')
      console.log(error.message)
    }
    return Promise.reject(error.message) // 返回接口返回的错误信息
  }
)

export default service

6.2 使用封装的request

在src根目录下新建api的文件夹，对接口进行分类（例如user.js、login.js等）

以user.js为例：

javascript 复制代码

// 先引入封装的request
import request from '@/utils/request'

// 用户信息
export function userInfo(data) {
  return request({
    url: '/api/userinfo',
    method: 'post',
    data,
  })
}

在需要使用该接口的组件中引入方法，可以直接使用：

javascript 复制代码

<script>  
import { userInfo } from "@/api/user";

methods: { 
        getuserInfo() {
            let params = {
                id: this.userId,
            };
            const res = await userInfo(params)
            console.log(res,code,data,'res');
        },
}

</script>

以上就是新建vue3项目的流程以及基本配置