首页

# 个性化设置

# 设置背景

下载插件 background ，shalldie 那个，安装后重启，点击文件 -> 首选项 -> 设置 -> 扩展 ->background->Style 的 setting.json 钟编辑，修改为以下代码：

{
    // 是否开启背景图显示
	"background.enabled": true,
	//true - 显示默认的图片  false - 显示用户自定义的图片
	"background.useDefault": false,
	// 自定义显示的图片，(路径要用双引号 "" 括起来！)
	"background.customImages": [
		// 最多设置三张图片，默认显示最上方的图片，当打开多个侧边栏时再依次显示后面的背景图片
		"file:///F:/Gallery/阎魔爱2.jpg",
	],
	"background.useFront": false,
	"background.style": {
		"margin": "0 auto",
		"top": "0",
		"left": "0",
		"width": "100%",
		"height": "100%",
		"z-index": "99999",
		"background.repeat": "no-repeat",
		"background-size": "cover",
		"opacity": 1 // 透明度
	},
}

# 项目设置

vscode 请用管理员身份运行

# vue3 项目

参考：https://vue3.chengpeiquan.com/

选择一个文件夹，管理员权限打开 cmd，然后执行以下命令：

npm install -g create-preset ：尽管有很多种创建 vue 项目模式，但是这种更快，将你需要的大部分依赖包都下了，可能会提示你 -g 已经弃用了，叫你使用 --local=global ，改一下即可。 -g 就是全局安装，之后再希望创建项目，就有直接的模板了。

preset -v ：检查一下是否安装成功，成功的话会有一个版本号

preset init hello-vue3 --template vue3-ts-vite ： init 后的参数就是项目名，最后一个固定参数表示使用的是 vue3、typescript、vite 构建工具

cd hello-vue3 、 npm install 、 npm run dev ：进入项目，安装一些必要的依赖，运行。

停止运行，用 vscode 打开项目，修改一下 vite.config.ts ：

如果在 Vite 的配置文件 vite.config.ts ，或者是在 Vue CLI 的配置文件 vue.config.js 里设置了 alias 的话，因为 TypeScript 不认识里面配置的 alias 别名，所以需要再对 tsconfig.json 做一点调整，增加对应的 paths ，否则在 VSCode 里可能会路径报红，提示找不到模块或其相应的类型声明。

假设在 vite.config.ts 里配置了这些 alias ：

export default defineConfig({
  //resolve () 函数在 path 包中，不要导错了
  resolve: {
    alias: {
      '@': resolve('src'), // 源码根目录
      '@img': resolve('src/assets/img'), // 图片
      '@less': resolve('src/assets/less'), // 预处理器
      '@libs': resolve('src/libs'), // 本地库
      '@plugins': resolve('src/plugins'), // 本地插件
      '@cp': resolve('src/components'), // 公共组件
      '@views': resolve('src/views'), // 路由组件
    },
  },
  // ...
})

那么在该项目的 tsconfig.json 文件里就需要相应的加上这些 paths ：

{
  "compilerOptions": {
    // ...
    "paths": {
      "@/*": ["src/*"],
      "@img/*": ["src/assets/img/*"],
      "@less/*": ["src/assets/less/*"],
      "@libs/*": ["src/libs/*"],
      "@plugins/*": ["src/plugins/*"],
      "@cp/*": ["src/components/*"],
      "@views/*": ["src/views/*"]
    },
    // ...
  },
  // ...
}

# 项目初始化

项目初始化都是在入口文件 main.ts 集中处理，在 vue2 中，有些插件使用 Vue.use 激活，有些作为 new Vue() 入参激活。

在 vue3 中使用 createApp 执行 vue 的初始化，不管是 vue 生态的东西，还是外部插件，ui 框架，统一使用 use() 激活。