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.youkuaiyun.com/m0_54011410/article/details/123644535
https://blog.youkuaiyun.com/xjtarzan/article/details/123682618

4.Vue3 store配置

一、安装vuex

npm install vuex

二、创建src/store/index.js，简单配置state进行测试(与vue2有区别)
最初使用Vue.use(Vuex)报错，该种加载插件的方式为vue2版本使用

// 方式一
import Vuex from "vuex"
export default new Vuex.Store({
  state: {
    name: "test"
  },
  mutations: {
    getActiveValue(state, value) {
      state.activeValue = value
    }
  },
})

//方式二
import Vuex from 'vuex'
const state = {
    name: "test"
}
const mutations = {
}
const getters = {
}
export default new Vuex.Store({
    state,
    mutations,
    getters
})

三、main.js挂载App(与vue2有区别)

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

四、测试store能否正确读取，修改HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      
    }
  },
  computed:{
    msg(){
      return this.$store.state.name;
    }
  }
}
</script>

5.vue3.0 引入Vant（移动端

6.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>