vue3 typescript mui 集成 - laose307/vue GitHub Wiki

vue3+typescript+mui 集成

一、创建vue3 项目

1.vue create 项目名字

//添加ts的支持
2.vue add typescript

  ts项目选项：最后一个是N ，前面都是Y

二、集成mui

1.把mui的js css 拷贝到assets目录，js拷贝要在 “vue add typescript ”之后，不然js会被转化为ts代码，编译的时候会报错

2.在 main.ts引入的js css 代码

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

//导入mui的js
//应用mui样式
import '../src/assets/mui/css/mui.min.css'
import '../src/assets/mui/css/app.css'
// @ts-ignore
import mui from '../src/assets/mui/js/mui'
// @ts-ignore
import VConsole from './assets/js/vconsole.min'

import './assets/css/li-new-ui.css'
import './assets/css/li-icon.css'
import './assets/css/li-animate.css'
const app=createApp(App)
app.config.globalProperties.vConsole=new VConsole()
app.config.globalProperties.mui=mui
app .mount('#app')

3. 在 tsconfig.json 配置不编译js文件

  "exclude": [
    "node_modules",
    "src/assets/**/*" //不编译assets文件夹内容
  ]

tsconfig.json配置选项详细说明：https://blog.csdn.net/qq_36288559/article/details/113702479?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-5.control

三、配置一些忽略设置

1.在根目录创建 .eslintrc.js

module.exports = {
  
    "extends": "plugin:vue/essential",
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        // 不需要
	"space-before-function-paren": 0,  // 函数定义时括号前面要不要有空格
	"eol-last": 0,  // 文件以单一的换行符结束
	"no-extra-semi": 0, // 可以多余的冒号
	"semi": 0,  // 语句可以不需要分号结尾
	"eqeqeq": 0, // 必须使用全等
	"one-var": 0, // 连续声明
	"no-undef": 0, // 可以 有未定义的变量
    }
};

项目里配置eslint less 选项详情：https://blog.csdn.net/zebrato/article/details/107804307

四、配置编译打包引用路径为相对路径

1.在根目录创建vue.config.js 并配置

// import path from 'path';

module.exports= {
    pages:{
        index:{
            entry:'src/main.ts'//page 入口
        }
    },

    publicPath:'./',
    assetsDir:"static",
    //webpack配置
    configureWebpack: {

    }
};