vue3+vite

使用pnpm快速创建vite+vue3项目

在cmd命令输⼊pnpm create vite 你的项⽬名，如下:

需要注意的一些文件有

• router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
 
const routes = [
 
]
 
// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes
})
 
export default router

vue3.0中createRouter来创建路由实例，createWebHashHistory代表使用hash模式的路由

• store/index.js

import { createStore } from 'vuex'
 
// 创建vuex仓库并导出
export default createStore({
  state: {
    // 数据
  },
  mutations: {
    // 改数据函数
  },
  actions: {
    // 请求数据函数
  },
  modules: {
    // 分模块
  },
  getters: {
    // vuex的计算属性
  }
})

vue3.0中createStore来创建vuex实例增加配置文件

• jsconfig.json

什么是jsconfig.json？

目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。

默认情况下，JavaScript语言服务将分析并为JavaScript项目中的所有文件提供IntelliSense(智能感知)。 您需要指定要排除或包含的文件，以便提供正确的IntelliSense。

exclude属性（glob模式）告诉语言服务哪些文件是什么文件，而不是源代码的一部分。 这使性能保持在较高水平。 如果IntelliSense速度很慢，请将文件夹添加到排除列表中（如果检测到速度减慢，VS代码将提示您执行此操作）

提示：您将要排除由构建过程生成的文件（例如，dist目录）。 这些文件会导致建议显示两次，并会降低IntelliSense的速度

使用路径别名@的时候可以提示路径

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

安装 axios

安装less

pnpm add less -D

配置less全局变量

新建vite.config.js

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        additionalData: "@import '@/assets/styles/index.less';"
      }
    }
  }
})

解决vue3中一些 css文件达不到在编辑器设置中的设置缩进格式（Tab =2）

创建一个   .editorconfig文件 （配置如下）

root = true
 
[*]
charset = utf-8charsetindent_style = space
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true