精华内容
下载资源
问答
  • 2022-02-13 01:00:11

    .editorconfig

    root = true
    
    [*]
    charset = utf-8
    # end_of_line = lf
    indent_size = 2 # 缩进
    indent_style = space
    insert_final_newline = true
    ij_html_quote_style = double
    max_line_length = 120
    tab_width = 2
    trim_trailing_whitespace = true
    

    .prettierrc.json

    {
        "printWidth": 100,
        "tabWidth": 2,
        "useTabs": false,
        "semi": true,
        "vueIndentScriptAndStyle": true,
        "singleQuote": true,
        "quoteProps": "as-needed",
        "bracketSpacing": true,
        "trailingComma": "es5",
        "jsxBracketSameLine": true,
        "jsxSingleQuote": false,
        "arrowParens": "always",
        "insertPragma": false,
        "requirePragma": false,
        "proseWrap": "never",
        "htmlWhitespaceSensitivity": "ignore",
        "endOfLine": "auto",
        "rangeStart": 0
    }
    

    .eslintrc.json

    {
      "root": true,
      "env": {
        "es2021": true,
        "node": true,
        "browser": true
      },
      "globals": {
        "node": true
      },
      "extends": [
        //    "plugin:vue/essential",
        /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
        //    "plugin:@typescript-eslint/recommended",
        //    "eslint:recommended",
        "plugin:vue/vue3-recommended",
        /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
        "plugin:prettier/recommended"
      ],
      "parser": "vue-eslint-parser",
      "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "ecmaVersion": 12,
        "sourceType": "module"
      },
      "plugins": ["@typescript-eslint"],
      "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
      "rules": {
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/consistent-type-imports": "error",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "vue/singleline-html-element-content-newline": "off",
        "vue/multiline-html-element-content-newline": "off",
        "vue/no-v-html": "off",
    
        //    "space-before-blocks": "warn",
        //    "space-before-function-paren": "error",
        //    "space-in-parens": "warn",
        //    "no-whitespace-before-property": "off",
        /**
         * Having a semicolon helps the optimizer interpret your code correctly.
         * This avoids rare errors in optimized code.
         * @see https://twitter.com/alex_kozack/status/1364210394328408066
         */
        "semi": ["error", "always"]
        /**
         * This will make the history of changes in the hit a little cleaner
         */
        //    "comma-dangle": ["warn", "always-multiline"],
        /**
         * Just for beauty
         */
        //    "quotes": ["warn", "single"]
      }
    }
    
    

    配置别名@,以及IDE自动识别

    • 安装依赖
    # 最好与当前版本一致,这里是最新版本
    pnpm add @types/node
    
    // vite-config-ts
    import * as path from 'path';
    const resolve = (p: string) => {
      return path.resolve(__dirname, p);
    };
    // https://vitejs.dev/config/
    export default defineConfig({
      resolve: {
        alias: {
          '@': resolve('./src'),
        },
      },
      plugins: [
      vue()
      ],
    });
    
    • 自动识别
    // tsconfig.json
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*":["./src/*"]
        }
      },
    
    更多相关内容
  • Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了,想试试新功能 ...
  • Vue3 vite配置跨域请求

    千次阅读 2022-03-19 15:08:43
    请求一些api接口可能遇到如下问题: 原因可能是该api不支持跨域请求 ...1.在项目下新建vite.config.js,如下图: vite.config.js: module.exports = { proxy:{ '/api':{ target:'https://pvp.qq.com.

    请求一些api接口可能遇到如下问题:

    原因可能是该api不支持跨域请求

    这里以王者荣耀的英雄介绍api(https://pvp.qq.com/web201605/js/herolist.json)为例,来解决问题

    流程:

    1.在项目下新建vite.config.js,如下图:

     vite.config.js:

    
    module.exports = {
        proxy:{
            '/api':{
                target:'https://pvp.qq.com/',
                changeOrigin:true,  // 允许跨域
                rewrite:path => path.replace(/^\/api/,'')
            }
        }
    
    }

    2.重启服务 :

    此时,在浏览器的开发者工具中已经能够看到获取到api数据 :

    为了让获取的数据展示在页面上,还需如下操作: 

    1.在工程名>src中新建store文件夹,并在该文件夹中新建index.js,用于存储获取的数据如下:

     index.js:

    import {reactive} from "vue";
    
    const store = {
        state:reactive({
            duanziList:[],
        }),
        setDzList(list){
          this.state.duanziList = list
        },
    }
    
    export default store;

    2.修改App.vue的代码如下:

    <template>
      <div v-for="(item,i) in store.state.duanziList" :key="i">
        <p>{{item.cname}}===>{{item.title}}</p>
      </div>
    </template>
    
    <script>
    import store from './store/index.js'
    import axios from 'axios'
    
    
    export default {
      name: 'App',
    
      provide:{
        store
      },
    
      setup(){
        let api = '/api/web201605/js/herolist.json';
        // // 方式1
        // fetch(api).then(res=>res.json()).then(result=>{
        //   store.setDzList(result.result)
        //   // console.log(result)
        // })
    
        // 方式2
        axios.get(api).then((result)=>{
          // console.log(result)
          store.setDzList(result.data)
        })
        return {
          store
        }
      }
    }
    </script>
    

    最终效果:

     

    展开全文
  • Vite2-多页 使用vite2 + vue3构建多页应用-源码
  • vue3 vite 配置代理解决跨域

    千次阅读 2021-09-29 14:44:00
    server: { proxy: { ‘/api’: { target: ‘http://localhost:3003’, changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ‘’), }, }, },

    在这里插入图片描述
    server: {
    proxy: {
    ‘/api’: {
    target: ‘http://localhost:3003’,
    changeOrigin: true,
    rewrite: (path) => path.replace(/^/api/, ‘’),
    },
    },
    },

    展开全文
  • 默认情况下,该接口使用Vue框架,但是您可以轻松使用任何其他框架,例如React , Preact , Angular , Svelte或其他任何框架。 Vite与框架无关 支持 此模板由维护。 你可以 继续开发此模板。 如果您有想法,问题...
  • 此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443;感谢大佬
  • vue3 vite使用element-plus

    千次阅读 2022-03-15 09:38:46
    $ npm install element-plus --save 按需引入 npm install -D unplugin-vue-components unplugin-auto-import ...import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver.
    $ npm install element-plus --save

    按需引入

    npm install -D unplugin-vue-components unplugin-auto-import
    // vite.config.ts
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    
    export default {
      plugins: [
        // ...
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    }

    后面直接使用就可以了 我这个是 element 跟 vant 混用的 感觉还不错 按需引入 各位也可以尝试下

    展开全文
  • Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
  • vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
  • 首先我们要安装vue3 vite 搭建项目 npm init @vitejs/app webapp cnpm init @vitejs/app webapp yarn create @vitejs/app webapp 项目结构 然后去安装node包 yarn 启动项目 yarn dev 这个时候就已经搭建成功 接下来...
  • Vue3 Vite项目创建

    千次阅读 2020-10-29 19:15:59
    利用 Vite 创建 Vue3 项目 // projectName 项目名称 create-vite-app projectName 安装依赖运行项目 cd projectName //进入工程项目文件夹 npm install //安装项目依赖 npm run dev //运行项目 ...
  • 1. 在根目录新建两个文件(分别对应生产和开发环境) ...VUE_APP_BASE_API = xxx2 默认vite只会暴露VITE开头变量。此时可以在其他文件通过import.meta.env.变量名获取环境变量 2. vite.config.js 最主要的是:
  • vue3 vite.config.ts 基础配置,持续更新

    千次阅读 2021-05-18 15:42:56
    import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; export default defineConfig({ plugins: [vue()], base: "./", resolve: { alias: { // 如果报错__...
  • Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ! 如果使用[removed] 是当前处于RFC...
  • Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vuevite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
  • vue3 vite vscode断点调试

    2022-06-14 11:38:24
    vue3 vite vscode断点调试
  • 安装和使用 tailwindcss ...# vue-3-vite 中安装 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # 初始化,新增 tailwind.config.js and postcss.config.js npx tailwind
  • //引入封装组件、这里普通import xxx会报错、最好带上后缀.js、这里用的是vite创建项目、@/引入好像不行 import * as myComponents from "./components/index.js"; const app = createApp(App) //全局遍历注册 ...
  • vue3 vite.config.ts 配置

    2021-10-26 13:52:49
    import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ base: './',//打包后...
  • VUE3 vite获取.env.development配置环境

    千次阅读 2021-11-30 15:54:57
    vue3无法获取.env.development问题
  • vue3 vite 怎么动态引用图片

    千次阅读 2021-07-23 20:09:20
    2、使用vite的import.meta.glob或import.meta.globEager,两者的区别是前者懒加载资源,后者直接引入。 <img :src="getSrc('Contact_us')" alt=""> getSrc(name) { const path = `./../assets/images/...
  • Vite(法语单词,“快” 的意思)是一种新型的前端构建工具,最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板。目前来说,Vue 使用的是 vue-cli 脚手架,React 一般...
  • 使用ViteVue 3,Tailwind CSS和TypeScript构建的仪表板入门模板。 V-Dashboard使用ViteVue 3,Tailwind CSS和TypeScript构建的Dashboard入门模板。 从https://github.com/tailwindcomponents/dashboard复制并...
  • vue3创建项目一 vite方式创建1.1 vite创建命令1.2 填写项目名称1.3 选择架构框架1.4 选择vue版本1.5 项目结构1.6 修改vite配置文件二 cli方式创建vue3项目2.1 cli创建命令2.2 选择模板多节点报错问题解决方案 ...
  • 项目名 项目名称和描述 “完美的” README模板 一个“完美的” README模板去快速开始你的项目!··提出 本篇README.md面向开发者 目录 上手指南 替换所有链接中的“ shaojintian / Best_README_template”替换为“ ...
  • <template> <div> <p>轮播图</p> <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white"> <van-swipe-item> <img :src="tu1" alt="" />...i
  • 打包时内存不足的问题 正常流程: 1、yarn add increase-memory-limit cross-env --dev ...3、yarn run fix-memory-limit 4、yarn build Mac 下流程: 1. export NODE_OPTIONS=--max_old_space_size=4096
  • 基于vite打包的vue3 + ts + tsx模板项目
  • vue3+vite环境搭建 vue3+vite实战

    千次阅读 2021-12-30 11:18:00
    使用脚手架创建vue3项目,并使用vite vue3+vite环境搭建 vue3+vite实战

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,062
精华内容 8,824
关键字:

Vue3 vite