[JavaScript知识库]vue3.0 搭建项目模板

1.配置less

一、安装less 和 less-loader

npm install less less-loader -D

二、再继续安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader

npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

三、在vue.config.js 添加如下代码

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({  
  transpileDependencies: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/assets/css/index.less')
      ]
    }
  }
})

/src/assets/css/index.less  就是你全局的less 文件的路径

四、再运行项目 就可以了

npm run serve

2.vue3.0 定义全局变量

一、用法main.js 设置全局变量

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

const app = createApp(App);
app.config.globalProperties.msg = "10"

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

二、methods访问

在选项式api中

  methods: {
    submit() {
      console.log(this.msg)
    },
  }

在组合式api中
当我们想在组件内调用http时需要使用getCurrentInstance()来获取。

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    onMounted(() => {
      // 通过getCurrentInstance().appContext访问全局属性
      const { msg } = getCurrentInstance().appContext.config.globalProperties
      console.log('msg', msg)
    });
  },
};

3.Vue3.0 封装axios

一、安装axios

npm install axios --save

二、配置axios，添加拦截器
在src目录下新建一个api文件夹，这里面放入今后所有的请求文件，例如新建一个请求用户信息的接口index.js，代码如下

import axios from 'axios'
// 请求拦截
axios.interceptors.request.use((config) => {
  return config
}, error => {
  return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use(res => {
  return res.data
}, error => {
  return Promise.reject(error)
})

function $get(url, data = {}) {
  return axios.get(url, {
    params: data
  })
}

function $post(url, data = {}) {
  return axios.post(url, data)
}
class Services {
  project = {
    share: data => $get('/api/v3/js', data), // 分享
  }
}
export default Services

三、全局定义封装的axios
main.js文件

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

const app = createApp(App);
// axios请求
import Services from '../src/api/index'
app.config.globalProperties.$api = new Services()
// axios请求

// createApp(App).use(router).mount('#app')
//记得把 createApp改为app
app.use(router).mount('#app')

四、发送请求

methods: {
            login() {
                console.log(this.$api)
                this.$api.project.share(this.info).then((res) => {
                    if (res.error_code == 0) {
                        this.$toast.success("填写成功");
                    } 
                })
            }
        }

五 、可参考文章
https://blog.csdn.net/m0_54011410/article/details/123644535
https://blog.csdn.net/xjtarzan/article/details/123682618

4.vue3.0 引入Vant（移动端）

5.vue3.0 引入Element-plus（PC端）

一、输入引入指令

npm install element-plus --save

二、在脚手文件中打package.json查看是否安装好

看到有 “element-plus”: "^2.2.18"就是安装好了

三、来到main.js文件之中，导入element-plus

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

const app = createApp(App);

//element-plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
//element-plus

// createApp(App).use(router).mount('#app')
//记得把 createApp改为app
app.use(router).use(ElementPlus).mount('#app')

四、使用，这里有个实例element的tab表格

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>
 
<script  setup>
  const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>