集成vue-router

使用yarn

yarn add vue-router@next --save

安装完成之后在src目录下创建文件夹router/index.ts,创建完成之后需要在Vue-Router中对Vue-Router进行初始化配置。我们暂时把初始化的工作搁置一下,先需要创建pages文件夹,把需要展示的页面创建完成。

创建完成之后,接下来就是完善router/index.ts中文件的初始化工作了:

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/home",
name: "Home",
alias: "/",
component: () => import("../pages/Home.vue")
},
{
path: "/about",
name: "About",
component: () => import("../pages/About.vue")
}
]
}) export default router;

接下来在main.ts文件中集成Vue-Router

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

测试一下,这里修改一下App.vue的代码,测试一下我们的路由是否已经可以正常使用了。

<template>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template> <script lang="ts">
import { defineComponent } from 'vue' export default defineComponent({
name: 'App'
})
</script>

接下来启动服务就可以看到所配置的页面了,说明配置的路由已经生效了。

集成Vuex

使用 Yarn

yarn add vuex@next --save

安装完成之后,首先添加store/index.ts来初始化Vuex。需要注意的是,如下示例使用了Vuex命名空间。可能在实际项目中使用命名空间相对来说还是比较普遍的,避免进行状态管理的时候导致变量污染。

import { createStore } from "vuex";

const store = createStore({
modules: {
home: {
namespaced: true,
state: {
count: 1
},
mutations: {
add(state){
state.count++;
}
}
}
}
}) export default store;

集成到Vue中:

import { createApp } from 'vue';
import App from './App.vue'; import router from "./router";
import store from "./store"; const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

现在Vuex就已经被集成到Vue中了为了保证集成的Vuex是有效地,那么需要对此进行测试:

pages/Home.vue

<template>
<h1>Home</h1>
<h2>{{count}}</h2>
<button @click="handleClick">click</button>
</template> <script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex'; export default defineComponent({
setup () {
const store = useStore();
const count = computed(() => store.state.home.count);
const handleClick = () => {
store.commit('home/add');
};
return {
handleClick,
count
};
}
})
</script>

当点击按钮的时候,就可以发现count值也随着点击每次递增,那么store是可以正常使用.

引入Vant框架

这边使用的是vant3.0框架

引入按需加载插件

yarn add vant@next -S
yarn add vite-plugin-style-import -D

配置按需加载

vite.config.ts中配置

import styleImport from 'vite-plugin-style-import'
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => {
return `vant/es/${name}/style/css`;
},
}]
})
]

main.ts中配置

import Vant from 'vant'
import 'vant/lib/index.css' const app = createApp(App)
app.use(Vant)
app.mount('#app')

按需加载有待完善,目前是配置CDN加载

vite.config.ts中配置

     {
name:'vue',
var:'Vue',
path:'https://cdn.jsdelivr.net/npm/vue@next'
},
{
name:'vant',
var:'vant',
css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
path:'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'
}

main.ts中正常引用

import Vant from 'vant'
app.use(Vant)

CDN配置

yarn add vite-plugin-cdn-import -D

vite.config.ts配置示例文件如下

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
plugins: [
vue(),
importToCDN({
modules: [
autoComplete('lodash'),
{
name:'ant-design-vue',
var:'antd',
path:'https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/dist/antd.js',
css:'https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/dist/antd.min.css'
}
]
})
]

自动完成(autoComplete)支持的模块如下:

"react" | "react-dom" | "react-router-dom" |
"antd" | "ahooks" | "@ant-design/charts" |
"vue" | "vue2" | "@vueuse/shared" |
"@vueuse/core" | "moment" |
"eventemitter3" | "file-saver" |
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"

分包配置

在vite.config.ts的build中做如下配置

rollupOptions: {
treeshake: false,
output: {
manualChunks (id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}

参考:Vite开发环境搭建

vue3.0+vite+ts项目搭建--基础配置(二)的更多相关文章

  1. vue3.0+vite+ts项目搭建--初始化项目(一)

    vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择v ...

  2. vue3.0+vite+ts项目搭建--vite.config.ts配置(三)

    vite.config.ts配置 配置路径处理模块 安装ts的类型声明文件 yarn add @types/node -D 通过配置alias来定义路径的别名 resolve: { alias: { ...

  3. vue3.0+vite+ts项目搭建-postcss-pxtorem 实现移动自适应(五)

    这里不考虑大屏,所以不做amfe-flexible的配置 首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixe ...

  4. vue3.0+vite+ts项目搭建-分环境打包(四)

    分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台 ...

  5. vue3.0+vite+ts项目搭建(报错处理)

    报错一 warning package.json: No license field$ vue-tsc --noEmit && vite build 解决方案,添加这两行,只添加一个是 ...

  6. vue3.0+vite+ts项目搭建-axios封装(六)

    封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...

  7. Asp.Net Core 项目搭建 基础配置 和MySql 的使用

    一.开发环境准备 1.安装Visual Studio 2015,我这里安装的是专业版. 2.安装.NET Core SDK相关 需要安装  Visual Studio 2015 update3和NET ...

  8. vite + ts 快速搭建 vue3 项目 以及介绍相关特性

    博客地址:https://ainyi.com/98 Vue3.0,One Piece 接下来得抽空好好学习了 vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vu ...

  9. vue3.0脚手架 创建项目

    1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...

随机推荐

  1. Flink Exactly-once 实现原理解析

    关注公众号:大数据技术派,回复"资料",领取1024G资料. 这一课时我们将讲解 Flink "精确一次"的语义实现原理,同时这也是面试的必考点. Flink ...

  2. Pytorch入门上 —— Dataset、Tensorboard、Transforms、Dataloader

    本节内容参照小土堆的pytorch入门视频教程.学习时建议多读源码,通过源码中的注释可以快速弄清楚类或函数的作用以及输入输出类型. Dataset 借用Dataset可以快速访问深度学习需要的数据,例 ...

  3. 【Web】BUUCTF-warmup(CVE-2018-12613)

    BUUCTF 的第一题,上来就给搞懵了.. .这要是我自己做出来的,岂不是相当于挖了一个 CVE ?(菜鸡这样安慰自己)   问题在 index.php 的 55~63 行 // If we have ...

  4. 动手做个 AI 机器人,帮我回消息!

    大家好,我是鱼皮,自从做了知识分享,我的微信就没消停过,平均每天会收到几百个消息,大部分都是学编程的朋友向我咨询编程问题. 但毕竟我只有一个人,没法所有消息都一个个回复,所以也是很愧疚和无力吧:另外我 ...

  5. CF748A Santa Claus and a Place in a Class 题解

    Content 圣诞老人坐在一个桌子被摆成 \(m\) 行 \(n\) 列的教室里.每个桌子有两个座位,每个位置从左往右都有编号,依次为 \(1,2,3,...,2\times n\times m\) ...

  6. ABP VNext框架中Winform终端的开发和客户端授权信息的处理

    在ABP VNext框架中,即使在它提供的所有案例中,都没有涉及到Winform程序的案例介绍,不过微服务解决方案中提供了一个控制台的程序供了解其IDS4的调用和处理,由于我开发过很多Winform项 ...

  7. IDEA配置连接(自建Maven仓库)私服并打包上传

    maven的setting.xml文件配置 在servers标签里配置 <server> <id>privete_maven</id> <!--账号密码需要与 ...

  8. 【LeetCode】1403. 非递增顺序的最小子序列 Minimum Subsequence in Non-Increasing Order

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 贪心 日期 题目地址:https://leetcode ...

  9. 【LeetCode】面试题62. 圆圈中最后剩下的数字 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 约瑟夫环 日期 题目地址:https://leetco ...

  10. hdu-5568SUM (dp)

    sequence2 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...