Vite的使用说明

文章详细介绍了从Vue2使用webpack+@vue/cli构建项目,到Vue3推荐的Vite和create-vue搭建框架的步骤。包括运行开发服务器、配置代理、集成vue-router进行路由管理和采用pinia进行状态管理。此外,还提到了使用Sass作为预处理器以及集成组件库element-plus的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue2建议的  构建工具  webpack  +  脚手架  @vue/cli    运行项目  npm run serve 

vue3建议的  构建工具   vite  +  脚手架  create-vue   运行项目  npm run dev

----------- 使用vite搭框架(没有router和pinia) --------------
1, 全局安装vite构建工具
    cnpm i create-vite -g   /  yarn add create-vite -g
2, 使用vite构建vue项目
    npm init vite@latest
3, 安装默认依赖 (cd进入项目根目录)
    cnpm i
4, 运行项目
    npm run dev

----------- 使用create-vue搭框架(可选router和pinia) --------------
1, 全局安装create-vue脚手架 
    cnpm i create-vue -g   /   yarn add  create-vue -g
2, 使用create-vue构建vue项目
    npm init vue@latest
3, 安装默认依赖 (cd进入项目根目录)
    cnpm i
4, 运行项目
    npm run dev
注意: create-vue 要求nodejs版本在v16及以上 ,否则运行报错

----------- 配代理 -------------
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: "./",
  server: {
    host: "localhost",
    open: true,
    port: 8080,
    proxy: {
      "/myDouyu": {
        target: "http://open.douyucdn.cn",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/myDouyu/, '')
      }
    }
  }
})


------------ 配路由 --------------
1, 安装路由
  cnpm i vue-router    /    yarn add vue-router
2, 创建路由文件 @/router/index.js
  import { createRouter, createWebHistory } from 'vue-router'
  const routes = [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue')
    }
  ]
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
  })
  export default router
3, main.js中导入挂载路由
  import router from './router'
  createApp(App).use(router).mount('#app')
4, 在App.vue中管理路由
  <router-view/>


------------ 状态管理pinia ---------
1, 安装pinia
  cnpm i pinia    /    yarn add pinia
2, 在main.js中导入pinia并挂载
  import { createPinia } from "pinia";
  const pinia = createPinia()
  createApp(App).use(pinia).mount('#app')
3, 创建状态管理仓库文件 @/store/index.js
  import { defineStore } from "pinia";
  export const useStore = defineStore("users", {
      state: () => {
          return {
              name: 'luoluo'
          }
      }
  })
   export default router
4, 在组建中导入仓库
  import { useStore } from "./store/index.js";
5, 读取仓库中的数据
  const store = useStore()
  {{store.name}}
  // 或者
  import { storeToRefs } from "pinia";
  const {name} = storeToRefs(store)
  {{name}}
6, 修改仓库的数据
  const store = useStore()
  store.name = '无法议案'
  // 或者一次修改多个值
  store.$patch(state=>{
    state.name = '物业覅按',
    state.age = 30
  })
7, 重置仓库, 还原为 初始值
  store.$reset()
8, getters 状态属性的配置与读取
  getters: {
    newName(state){
      return state.name+1
    }
  }
  {{store.newName}}
9, actions 函数的定义与调用
  actions: {
    setName(data){
      this.name = data
    }
  }
  store.setName("fanfan")

------------ 预处理器 Sass ----------
1, 安装sass
  cnpm i sass sass-loader   /   yarn add sass sass-loader
2, 在style中使用sass语法
  <style scoped lang="scss">

------------ 组件库element-plus ----------
1, 安装 element-plus 
  cnpm i element-plus    /   yarn add element-plus 
  cnpm i @element-plus/icons-vue
2, 在main.js中引入
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  import zhCn from "element-plus/lib/locale/lang/zh-cn"
  createApp(App).use(ElementPlus, {locale: zhCn}).mount('#app')


 

<think>好的,我现在需要帮助用户解决在Quasar项目中配置Vite别名@为根目录的问题。用户之前已经询问过关于Webpack的配置方法,现在转向Vite,这可能是因为Quasar的新版本默认使用Vite了。我需要结合用户提供的引用内容,特别是引用[1]中提到的Vite配置方法,来给出正确的步骤。首先,用户引用了Vite项目的配置方法,其中提到在vite.config.ts中使用resolve.alias来设置@别名,并需要在tsconfig.json中配置路径。但Quasar项目通常通过quasar.config.js来配置,而不是直接修改Vite的配置文件。因此,我需要确认Quasar中如何集成Vite的配置。 根据引用[2],用户需要在quasar.config.jsvitePlugins中添加插件,这说明Quasar允许通过这个文件来修改Vite的配置。同样,配置别名应该是在build属性下的vite配置部分。引用[1]中的例子显示,Vite的resolve.alias需要设置路径,所以需要将这个方法应用到Quasar的配置中。 接下来,我需要确保步骤正确。首先,修改quasar.config.js,在build.vite.resolve.alias里添加@的路径。这里要注意路径解析是否正确,使用path.resolve(__dirname,'src')可能更准确,因为根目录可能指的是src目录,而不是项目根。不过用户可能希望@指向项目根,所以需要明确这一点。然后,TypeScript的支持需要在tsconfig.json中添加baseUrl和paths,这和之前Webpack的配置类似。用户可能已经配置过,但需要再次确认,避免路径错误。使用示例部分应该和之前一致,但需要确保路径正确。验证部分可以通过创建测试文件或检查构建结果来确认别名是否生效。另外,用户可能遇到VSCode路径提示不生效的问题,这可能需要重启VSCode或安装TypeScript插件。同时,如果使用Jest测试,可能需要额外的配置,这可以作为相关问题提出。 最后,生成相关问题需要考虑用户可能遇到的后续问题,比如验证配置、Vite与Webpack的区别、工具支持、多别名配置和测试影响等。这些都需要涵盖,以帮助用户全面了解。</think>### 在 Quasar (Vite) 项目中配置 `@` 为根目录的步骤 #### 1. **修改 `quasar.config.js`** ```javascript const path = require('path') module.exports = configure(function (ctx) { return { build: { vite: { resolve: { alias: { '@': path.resolve(__dirname, 'src') // 根据项目结构调整路径 } } } } } }) ``` - 使用 Vite 的 `resolve.alias` 配置语法[^1] - `path.resolve(__dirname, 'src')` 表示指向项目 `src` 目录(可根据实际需求调整路径) #### 2. **TypeScript 支持** 在 `tsconfig.json` 中添加配置: ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] // 需与 vite 配置路径一致 } } } ``` - 确保路径映射与 Vite 配置完全匹配[^1] - 重启 IDE 使配置生效 #### 3. **使用示例** ```typescript import MyComponent from '@/components/MyComponent' import store from '@/store' ``` #### 4. **验证配置** - 在代码中尝试导入 `@/non-existent-path`,观察构建错误提示是否显示正确解析路径 - 运行 `npx vite inspect` 查看最终配置(需安装 `vite` 全局依赖) --- ### 关键差异说明Vite vs Webpack) | 特性 | Vite 配置 | Webpack 配置 | |--------------|-------------------------------|------------------------------| | 配置文件 | `quasar.config.js` → `build.vite` | `quasar.config.js` → `chainWebpack` | | 路径解析 | 使用 Node.js 原生 path 模块 | 需通过 Webpack-chain 语法 | | 热更新 | 即时生效 | 需重新编译 | --- ### 常见问题解决 **Q: 配置后 VSCode 仍提示路径错误?** - 安装 `TypeScript Vue Plugin (Volar)` 扩展 - 执行 `Command + Shift + P` → `TypeScript: Restart TS server` **Q: 如何指向项目根目录而非 src?** ```javascript alias: { '@': path.resolve(__dirname) // 移除 src 参数 } ``` 需同步修改 `tsconfig.json` 的 `paths` 配置 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值