精华内容
下载资源
问答
  • vite2-vue3-admin Vite2 + Vue3.0 +蚂蚁设计2.x 提示:可注册成功后登录 目录树 ├─public └─src ├─api ├─assets │ ├─font │ ├─icon │ ├─img │ └─svg ├─components │ └─global │ ...
  • vite-vue3-模板 Vue 3 +打字稿+ Vite项目模板
  • 项目基于typescript,vue3.0,vue-router4.0,vuex4.0,vite2.0实现的 vue3 风格的手机端基础工程,单页面应用。 预安装 环境要求 Node.js: - 版本最好大于 12.0.0 yarn > npm > cnpm: - 包管理工具. 使用 开发环境 yarn...
  • Vite-Vue2-demo 开发环境vite,webpack打包。 scss变量注入 alias cdn引入,配置resolve externals html模板语法 Project setup yarn install Compiles and hot-reloads for development # vite启动 npm run dev ...
  • vue3-antd 基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板 账号:admin,密码:123456 系统模块数据是从先前获取来的真实数据,路由也是从内部动态获取的,而只是通过内网穿透提供访问的,难免...
  • vite2+vue3项目搭建

    2021-06-03 09:46:20
    1.安装Node.js 请确保你的电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 >= 12.0.0。 查看 Node.js 版本:

    目录

     

    1.安装Node.js

    2.使用 Vite 快速初始化项目雏形

     3.修改 Vite 配置文件

    4.集成路由工具 Vue Router

    5.集成状态管理工具 Vuex

    6.集成 HTTP 工具 Axios

    7.移动端适配


    1.安装Node.js

    请确保你的电脑上成功安装 Node.js,本项目使用 Vite 构建工具,需要 Node.js 版本 >= 12.0.0

    查看 Node.js 版本:

    node -v

    建议将 Node.js 升级到最新的稳定版本:

    # 使用 nvm 安装最新稳定版 Node.js
    nvm install stable

    2.使用 Vite 快速初始化项目雏形

    • 使用 NPM:npm init @vitejs/app
    • 使用 Yarn:yarn create @vitejs/app

    然后按照终端提示完成以下操作:

     1.输入项目名称

    2.选择vue项

    3.选择TS选项

     

    4.安装成功后执行

    安装依赖:npm install

    运行项目:npm run dev

     3.修改 Vite 配置文件

    Vite 配置文件 vite.config.ts 位于根目录下,项目启动时会自动读取。

    本项目先做一些简单配置,例如:设置 @ 指向 src 目录、 服务启动端口、打包路径、代理等。

    关于 Vite 更多配置项及用法,请查看 Vite 官网 https://vitejs.dev/config/ 。

    import { defineConfig } from "vite";
    import vue from "@vitejs/plugin-vue";
    // 如果编辑器提示 path 模块找不到,则可以安装一下 @types/node -> npm i @types/node -D
    import { resolve } from "path";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          "@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录
        },
      },
      base: "./", // 设置打包路径
      server: {
        port: 4000, // 设置服务启动端口号
        open: true, // 设置服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
    
        // 设置代理,根据我们项目实际情况配置
        // proxy: {
        //   '/api': {
        //     target: 'http://xxx.xxx.xxx.xxx:8000',
        //     changeOrigin: true,
        //     secure: false,
        //     rewrite: (path) => path.replace('/api/', '/')
        //   }
        // }
      },
    });

    4.集成路由工具 Vue Router

    1.安装支持 Vue3 的路由工具 vue-router@4

    npm i vue-router@4

    2.创建 src/router/index.ts 文件

    在 src 下创建 router 目录,然后在 router 目录里新建 index.ts 文件: 

     └── src/
         ├── router/
             ├── index.ts  // 路由配置文件

    import {
      createRouter,
      createWebHashHistory,
      RouteRecordRaw,
    } from "vue-router";
    import Home from "@/views/home.vue";
    import Vuex from "@/views/vuex.vue";
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: "/",
        name: "Home",
        component: Home,
      },
      {
        path: "/vuex",
        name: "Vuex",
        component: Vuex,
      },
      {
        path: "/axios",
        name: "Axios",
        component: () => import("@/views/axios.vue"), // 懒加载组件
      },
    ];
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes,
    });
    
    export default router;

    3.在 main.ts 文件中挂载路由配置

    import { createApp } from "vue";
    import App from "./App.vue";
    
    import router from "./router/index";
    
    createApp(App).use(router).mount("#app");

    5.集成状态管理工具 Vuex

    1.安装支持 Vue3 的状态管理工具 vuex@next

    npm i vuex@next

     2.创建 src/store/index.ts 文件

    在 src 下创建 store 目录,然后在 store 目录里新建 index.ts 文件:

    └── src/
        ├── store/
            ├── index.ts  // store 配置文件

    import { createStore } from "vuex";
    
    const defaultState = {
      count: 0,
    };
    
    // Create a new store instance.
    export default createStore({
      state() {
        return defaultState;
      },
      mutations: {
        increment(state: typeof defaultState) {
          state.count++;
        },
      },
      actions: {
        increment(context) {
          context.commit("increment");
        },
      },
      getters: {
        double(state: typeof defaultState) {
          return 2 * state.count;
        },
      },
    });

     3.在 main.ts 文件中挂载 Vuex 配置

    import { createApp } from "vue";
    import App from "./App.vue";
    
    import store from "./store/index";
    
    createApp(App).use(store).mount("#app");

    6.集成 HTTP 工具 Axios

    1.安装 Axios(Axios 跟 Vue 版本没有直接关系,安装最新即可)

    npm i axios

    2.配置 Axios 

    └── src/
        ├── request/
            ├── api.ts  // api管理文件 

            ├── axios.ts  // Axios 配置文件

            ├── request.ts  // 请求配置文件

     axios.ts

    import axios from 'axios' //引入axios
    import { Toast } from 'vant'
    
    // vue 路由切换时 中止未完成的请求
    // 配置 全局 promiseArr
    window._axiosPromiseArr = []
    
    // 创建axios实例
    const instance = axios.create({
        timeout: 120000, // 请求超时时间
    })
    
    // 设置 post默认 Content-Type
    instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
    
    
    // 设置请求拦截器
    instance.interceptors.request.use(
        (config: any) => {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });
            if (config.method == 'post') {
                config.data = JSON.stringify(config.data)
            }
            //  每个请求都会加入 ,路由切换时中止未完成的请求
            config.cancelToken = new axios.CancelToken(cancel => {
                window._axiosPromiseArr.push({
                    cancel
                })
            })
            return config
        },
        err => {
            // 请求错误
            return Promise.reject(err)
        })
    
    
    // 设置响应拦截器
    instance.interceptors.response.use(
        (response: any) => {
            Toast.clear()
            if (response.status == 200) {
                 return Promise.resolve(response)
            } else {
                return Promise.reject(response)
            }
        },
        error => {
            // 超时处理
            let originalRequest = error.config
            if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1 && !originalRequest._retry) {
                Toast('请检查网络再重新连接')
                return Promise.reject('请检查网络再重新连接')
            }
            if (error.response.status) {
                return Promise.reject(error.response)
            }
        }
    )
    export default instance
    

    request.ts 

    import instance from './axios'
    
    const post = (url: string, data: any = {}) => {
        return new Promise((resolve: any, reject: any) => {
            instance.post(url, data)
                .then((response: any) => {
                    resolve(response)
                })
                .catch((err: any) => {
                    reject(err)
                })
        })
    }
    export {
        post
    }

    api.ts

    export default {
        api1:'baidu/test/api1',  //模拟api接口
    }

    main.ts

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './route/index' //引入路由
    import store from './store/index' //引入vuex
    
    import { post } from './request/request'
    import api from './request/api'
    
    
    // 全局配置
    const app = createApp(App);
    
    app.config.globalProperties.$post = post
    app.config.globalProperties.$api = api
    
    app.use(router)
    app.use(store)
    app.mount('#app')

    axios使用

    <script lang="ts">
        import { defineComponent, getCurrentInstance, reactive } from 'vue'
    
        export default defineComponent({
            setup(props, { emit }) {
                const state = reactive({
                    name: '',
                    id_no: '',
                    card_no: ''
                })
                // 引用全局变量
                // 可能会报 Property 'ctx' does not exist on type 'ComponentInternalInstance | null'. 的错误. 可在后面加上 “as any” 解决。
                const { ctx } = getCurrentInstance() as any;
                    ctx.$post(ctx.$api.api1,{name:'xx'})
                        .then((res: any) => {
                            console.log(res)
                        })
    
                return {
                    state
                }
            },
        })
    </script>
    

    7.移动端适配

    安装postcss-pxtorem

    npm install postcss-pxtorem -D

    在根目录下创建postcss.config.js

    module.exports = {
      "plugins": {
        "postcss-pxtorem": {
          rootValue: 37.5, // Vant 官方根字体大小是 37.5
          propList: ['*'],
          selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
        }
      }
    }

    在根目录src中新建util目录下新建rem.ts等比适配文件

    // rem等比适配配置文件
    // 基准大小
    const baseSize = 37.5 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
    // 设置 rem 函数
    function setRem () {
      // 当前页面宽度相对于 375宽的缩放比例,可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
      const scale = document.documentElement.clientWidth / 375
      // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      console.log("我执行了")
      setRem()
    }

    在mian.ts引入

    import "./utils/rem"

     

     

    文章参考:https://mp.weixin.qq.com/s/C6kOG8plElPsDSmErxRHkA 

    展开全文
  • Vite2构建Vue3项目

    千次阅读 2021-10-22 20:22:02
    环境:node.js 版本>=12.0.0; npm 6.x。 1. 搭建 ...2. 配置 vite.config.js import { defineConfig } from "vite"; import path from "path"; import vue from "@vitejs/plugin-vue"; /.

    环境:node.js 版本>=12.0.0; npm 6.x。

    注:每做一步,都要查看有木有错,或是否有达到预期效果。

    1. 搭建

    npm init @vitejs/app vite-vue-demo --template vue
    cd vite-vue-demo
    npm i
    npm run dev

     2. 配置 vite.config.js

    import { defineConfig } from "vite";
    import path from "path";
    import vue from "@vitejs/plugin-vue";
    
    // defineConfig有代码提示
    export default defineConfig({
        resolve: {
            alias: { // 别名
                "@": path.resolve(__dirname, "src"),
                "styles": path.resolve(__dirname, "src/styles"),
                "views": path.resolve(__dirname, "src/views"),
                "comps": path.resolve(__dirname, "src/components"),
                "plugins": path.resolve(__dirname, "src/plugins"),
                "utils": path.resolve(__dirname, "src/utils"),
            }
        },
        plugins: [vue()]
    });

    3. 样式管理

    npm i sass -D

    src目录下新建styles/index.scss,作为全局样式的出口文件,在main.js中导入。

    import { createApp } from "vue";
    import App from "./App.vue";
    
    // 全局样式导入
    import 'styles/index.scss'
    
    createApp(App).mount("#app");

    在App.vue中所书写的样式和重置样式就可以放在index.scss文件中了。

    另外,引入element ui库时会涉及到样式覆置;有全局样式时,则在styles目录下新建element-ui.scss,在index.scss中引入。

    @import './element-ui.scss'

    4. element ui库

    npm i element3 -S

    一般在上线项目中不建议全局引入。 

    /**
    * main.js中全局引入element3
    */
    import { createApp } from "vue";
    import App from "./App.vue";
    
    import element3 from 'element3';
    import 'element3/lib/theme-chalk/index.css';
    
    const app = createApp(App);
    app.use(element3);
    app.mount("#app");

    建议按需引入▲。

    /**
    * src目录下,plugins/element3.js
    */
    import { ElButton, input } from 'element3'
    import 'element3/lib/theme-chalk/button.css'
    import 'element3/lib/theme-chalk/input.css'
    
    export default function(app){
        app.use(ElButton)
        app.use(input)
    }
    /**
    * main.js导入element3
    */
    import element3 from '@/plugins/element3.js';
    
    app.use(element3);

    5. 路由 router

    npm i vue-router@4 -S
    /**
    * src目录下,router/index.js
    * v4.x写法(看官方文档)
    */
    import { createRouter, createWebHistory } from "vue-router";
    
    const routes = [
        {
            path: "/",
            // 动态导入的模块
            component: () => import("views/home.vue"),
        },
    ];
    
    // 工厂函数创建router实例
    const router = createRouter({
    	history: createWebHistory(),
        routes,
    });
    
    export default router;

     另外,src目录下新建views/home.vue,内容随意。

      注:路由数组导入的组件不能省略.vue后缀。

    /**
    * main.js导入router
    */
    import { createApp } from "vue";
    import App from "./App.vue";
    import router from "./router/index"; // 这里的router为插件
    
    const app = createApp(App);
    app.use(router);
    app.mount("#app");

    接着,App.vue可以删减成这个样子了。

    <template>
    	<router-view></router-view>
    </template>

    6. vuex4

    npm i vuex@4 -S
    /**
    * src目录下,store/index.js
    */
    import { createStore } from 'vuex';
    
    export default createStore({
        state: {
            counter: 0,
        },
        mutations: {
            add(state){
                state.counter++;
            }
        }
    });
    /**
    * main.js导入store/index.js
    */
    import store from './store/index';
    
    app.use(store);
    <!-- 组件内测试 -->
    <template>
    	{{ $store.state.counter }}
    </template>
    
    <script setup>
        import { useStore } from "vuex";
        const store = useStore();
        console.log(store.state);
    </script>

    7. mock模拟后台数据

    npm i mockjs -S
    npm i vite-plugin-mock -D
    /**
    * vite.config.js
    */
    import vue from "@vitejs/plugin-vue";
    import path from "path";
    import { viteMockServe } from 'vite-plugin-mock';
    
    export default ({ command }) => {
      let proMock = true
    
      return {
        resolve: {
          alias: { // 别名
            "@": path.resolve(__dirname, "src"),
            "styles": path.resolve(__dirname, "src/styles"),
            "views": path.resolve(__dirname, "src/views"),
            "comps": path.resolve(__dirname, "src/components"),
            "plugins": path.resolve(__dirname, "src/plugins"),
            "utils": path.resolve(__dirname, "src/utils"),
          }
        },
        plugins: [
          vue(),
    
          viteMockServe({
            // default
            mockPath: 'mock',
            // localEnabled: command === 'serve',
            // prodEnabled: command !== 'serve' && prodMock,
            // injectCode: `
            //   import { setupProdMockServer } from './mockProdServer';
            //   setupProdMockServer();
            // `,
          }),
    
          // 如若报错 Unrestricted file system access to
          // serve: {
          //  fs: {
          //      strict: false
          //  }
          }
        ]
      }
    };
    /**
    * 项目目录下,mock/test.js
    */
    export default [
        {
            url: "/api/get",
            method: "get",
            response: () => {
                return {
                    code: 0,
                    message: "success",
                    data: { name: "vben" }
                }
            }
        },
    ];

    8. axios

    npm i axios -S
    /**
    * src目录下,utils/request.js
    * 这里只作简单配置
    * 在这个文件中可根据后台返回的状态作出相应的处理
    */
    import axios from "axios";
    
    const service = axios.create({
        baseURL: "",
        timeout: 5000
    });
    
    service.interceptors.request.use(
        (config) => {
            return config;
        },
        (error) => {
            console.log(error);
        }
    );
    
    service.interceptors.response.use(
        (response) => {
            const res = response.data;
            return res;
        },
        (error) => {
            console.log(error);
        }
    );
    
    export default service;
    /**
    * src目录下,apis/index.js
    * 统一管理
    */
    import $axios from "utils/request";
    
    export const getUsers = () => {
        return $axios("/api/get");
    }
    <!-- 组件内测试 -->
    <template>
        Hello Vite
    </template>
    
    <script setup>
        import { getUsers } from "@/apis";
        
        getUsers().then(res => {
            console.log(res);
        });
    </script>

    ps:文中步骤或描述若有错误之处,烦请留言指正。

    展开全文
  • Vue 3 Vuex 4商店(完全键入) 打字稿 带有JIT编译器的Tailwind CSS +已预安装以下插件 @tailwindcss/aspect-ratio @tailwindcss/line-clamp @tailwindcss/typography @tailwindcss/forms PostCSS 8 w / post...
  • vite2 + vue3全家桶来了

    2021-06-16 23:29:24
    为了学习vite和熟悉vue3语法,做了这个仿网易云音乐的h5,欢迎大家的讨论。 预览效果 地址 在线访问地址: online git地址: vite-demo 技术栈 vue3 + vue-router4 + vuex4 vant3 (ui框架) typescript 目录结构...

    前言

    为了学习vite和熟悉vue3语法,做了这个仿网易云音乐的h5,欢迎大家的讨论。

    预览效果

    image.png

    地址

    1. 在线访问地址: online
    2. git地址: vite-demo

    技术栈

    1. vue3 + vue-router4 + vuex4
    2. vant3 (ui框架)
    3. typescript

    目录结构

    
    ├── README.md
    ├── dist
    │   ├── assets
    │   ├── favicon.ico
    │   └── index.html
    ├── hosts
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── proxy.ts  
    ├── public
    │   └── favicon.ico
    ├── src                 ---src
    │   ├── App.vue
    │   ├── api             --- 接口和axios封装
    │   ├── assets      
    │   ├── components      --- 组件
    │   ├── main.ts
    │   ├── page           
    │   ├── router         --- 路由
    │   ├── shims-vue.d.ts
    │   ├── store          --- 数据状态管理
    │   └── utils          --- 公共方法
    ├── tsconfig.json
    └── vite.config.ts     --- 配置文件 
    

    功能

    1. 项目整体结构搭建
    2. axios封装
    3. 代理配置
    4. 项目部署(部署到vercel)
    5. eslint/prettierrc配置
    6. autoprefixer配置

    说明

    此次功能仅实现了 推荐列表歌单页小播放器三块功能,但后续我暂时没有接着完善功能的想法,因为

    1. 麻雀虽小,五脏俱全,作为一个音乐类的h5,其最小的逻辑已经完成
    2. 我的目标已经达到,我希望学到的vite和vue3全家桶已经全部用到,后续接着完善功能对我个人而言手艺不是很大了。
      期待下次接着完善这个项目的契机

    感谢

    最后感谢Binaryify大佬的开源项目NeteaseCloudMusicApi,让我有接口可以直接用,专心搞前端

    展开全文
  • 该入门模板将帮助您轻松创建由称为的闪电般快速构建工具捆绑提供的Vue2应用程序(带有Options API)。 除了Vite之外,此模板还提供: Vue路由器 WindiCSS(TailwindCSS)+黑暗模式 :package: Vite插件 -Vite 2对...
  • Vite2 + Vue3 + Typescript 入门级教程

    千次阅读 2021-03-14 22:39:53
    Vite2 + Vue3 + Typescript 入门级教程 资源代码可以在这里下载 https://download.csdn.net/download/qq_36772866/15791490 新建项目 创建项目目录 todoList 我们来到 Vite2 的官网,网址如下: ...

    Vite2 + Vue3 + Typescript 入门级教程

    资源代码可以在这里下载

    https://download.csdn.net/download/qq_36772866/15791490

    新建项目

    创建项目目录 todoList

    我们来到 Vite2 的官网,网址如下:

    https://vitejs.dev/guide/#scaffolding-your-first-vite-project
    

    Vite2 内置了很多中模板:

    vanilla
    vue
    vue-ts
    react
    react-ts
    preact
    preact
    展开全文
  • vite2+vue3+TS+vue-router

    2021-11-19 16:19:32
    day01 1. vite项目创建 2. 路由管理
  • Vite创建Vue3项目

    2021-09-16 10:08:11
    文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结构6. 启动项目Vue3中使用jsx1. 安装插件2. 注册插件3. 使用插件注意 Vite创建Vue3项目 Vite 需要 Node.js 版本 >...
  • vite2 + vue3搭建项目

    2021-05-17 19:19:41
    vite 官网 npm初始化项目 npm init @vitejs/app 命名项目后 在command line options里选择template,这里选择了vue框架 然后根据提示 Now run: cd vitetest1 npm install npm run dev run dev便可以编译出...
  • h5-vite-vue3-template 开箱即用的 h5 开发模板。技术栈:Vite/Vue3/Scss/ github仓库地址 目录简介 ├── index.html # index.html 模板 ├── jsconfig.json # JavaScript 配置 ├── package....
  • 本篇主要介绍从零开始搭建Vite2 + Vue3+Element-Plus + Vue-router4 + Vuex + Eslint。
  • Vite创建Vue2项目

    2021-09-16 11:28:39
    Vite创建Vue3项目 中讲到,Vite 官方对 Vue 的支持只针对于Vue3.x 版本,而对于 Vue2.x 是不支持的。 今天就来讲讲如何使用 Vite 创建 Vue2 项目 使 Vite 支持 Vue2.x,是需要安装插件来实现,官方文档 文章目录...
  • vite2+vue3

    2021-09-14 15:56:26
    创建vue2项目 装依赖 2个警告信息 vite2的主要变化 别名:alias 以前的相对路径 css.modules esbulid打包 import { defineConfig } from "vite"; vue3 setup script vue也要通过插件引用 ...
  • 使用vite创建vue3项目

    万次阅读 2020-09-23 14:46:34
    vite 这个是尤大开发的新工具,目的是以后替代webpack,原理是利用浏览器现在已经支持es6的import了,遇到import会发送一...create-vite-app 01-vue3-vite cd 01-vue3-vite npm install npm run dev 项目目录 ...
  • 在写本文时 Vite 没有提供 Vue2 的创建方式。 相信有些开发者还没开始学 Vue3,但又想尝尝 Vite。那可以参考本文的进食方式。 如果心急的话,“0、简介” 可以跳过。 0、简介 在写本文时,Vite 默认不提供 Vue2 项目...
  • Router 4.x 需要搭配 Vue 3.x 进行使用,通过 Vite 进行创建一个 Vue 3.x 的项目就可以上手 Router 4.x。 创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template vue-ts 此处创建的是 Vue 3.x + ...
  • 我们有很多现有的vue-cli(3.x / 4.x)项目。 在生产中:基于webpack的vue-cli仍然是捆绑webapp的最佳实践(通过代码拆分,旧版浏览器的旧版构建)。 在开发中:即时启动服务器并通过闪电快速实现HMR很有趣。 ...
  • 我的项目,非引入资源(主要是图片)一般存放在/public/assets,根据vite文档指引,public下的文件会在打包和移入build/outDir目录下,访问时使用 /assets绝对路径的方式。 public入口 入坑: 看到文档的说明,我...
  • 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么?...npm init @vitejs/app my-first-vite-app --template vue 或 yarn create @vitejs/app my-f...
  • Vue3官网:https://v3.cn.vuejs.org/ Vite官网:https://cn.vitejs.dev/ VueRouter官网:https://next.router.vuejs.org/zh/ 使用Vite构建时,会和以前的有些写法有些不同,例如之前我们使用 // 引入路由对象 import...
  • vite搭建vue3项目

    2021-10-15 18:02:30
    首先按照官网创建项目,yarn create vite 项目名字 --template vue(这里我用的yarn,用npmnpm init vite@latest 项目名字 -- --template vue) 安装依赖 yarn(npm install) typescript 首先安装 yarn add typescript ...
  • ViteVue作者开发的一款意图取代webpack的工具 原理是利用了ES6的import会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去webpack冗长的打包时间。 Vite也是一个Vue的包管理工具。 安装Vite npm ...
  • 学习:议程 使用 + + + 发展 npm run dev 生产 npm run build 文件将在dist文件夹中 演示版 看
  • 可以使用 Vite 快速构建 Vue 项目。 vue3文档操作步骤,按照文档操作,出现繁琐问题; vite构建后的vite版本是老版本: “vite”: “^1.0.0-rc.13” ,查看package.json 文件发现vue也是老版本。 正确方式: npm ...
  • vue3+ts+vite2项目实战探坑干货

    千次阅读 2021-05-06 16:17:37
    1.Vite创建vue3项目 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 默认构建好的目录结构是不包含router和vuex的需要手动安装并创建对应目录,使用命令: npm i vue-router@next vuex@next -...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,610
精华内容 5,444
关键字:

vite2vue3

vue 订阅