vue3.0+vite+TypeScript 初体验

时间:2020-9-5 作者:admin

一、什么是 vite

Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具。在生产环境下基于 Rollup 打包。

优点:

  • 快速冷启动服务器
  • 即时热模块更换(HMR)
  • 真正的按需编译

二、vite 创建项目

npm init vite-app <project-name>    // 创建项目 
cd <project-name>   // 进入新创建的项目
npm install     // 安装项目依赖
npm i -S typescript vue-router@next axios   // 集成 TypeScript vue-router axios
npm i -D eslint eslint-plugin-vue   // 集成 eslint sass
npm i sass --save-dev   // 集成css预编译sass
npm run dev     // 运行当前项目

三、项目配置

3.1、配置 vite.config.js

vite.config.js的作用类似于之前 @vue-cli 项目中的 vue.config.js

import path from 'path'
module.exports = {
  // 导入别名
  alias: {
    '/@/': path.resolve(__dirname, './src'),
    '/@/': path.resolve(__dirname, './src/views'),
    '/@components/': path.resolve(__dirname, './src/components'),
    '/@utils/': path.resolve(__dirname, './src/utils'),
  },
  // 配置Dep优化行为
  optimizeDeps: {
    include: ["lodash"]
  },
  // 为开发服务器配置自定义代理规则。
  proxy: {
    '/api': {
      target: 'http://rap2.taobao.org:38080/app/mock/237355',
      changeOrigin: true,
      rewrite: (path: string) => path.replace(/^\/api/, '')
    }
  }
  // ... 
}

参考 GitHub

3.2、集成 Ant Design of Vue 2.0 UI框架

安装 Ant Design of Vue ( 该 UI 库支持 Vite & TypeScript 具体使用关注官方文档 )

npm install ant-design-vue --save ( yarn add ant-design-vue )

按需加载所需的 UI 组件

npm install -D babel-plugin-import
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

Ant Design of Vue 官网

3.3、配置 Router

在src目录下,新建 router文件夹,并在文件夹内创建 index.js

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: import('/@views/Home'),
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('/@views/User'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

使用参考

3.4、新建 jsx 页面

在src目录下,新建 views文件夹,并在文件夹内创建 Home.jsxUser.jsx

HomePage

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const msg='hello Home'
    return () => (
      <>
        <h1>Home</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

UserPage

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'User',
  setup() {
    const msg='hello 用户中心'
    return () => (
      <>
        <h1>User</h1>
        <h1>{msg}</h1>
      </>
    );
  }
});

Vue 3.0 中使用 JSX

3.5、 main.ts

在 main 中引入 router 以及 ant-design-vue

import { createApp } from 'vue'
import App from './App'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(router).use(Antd).mount('#app')
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。