代码拉取完成,页面将自动刷新
强烈推荐使用 yarn 安装项目依赖
本框架使用 Vue 3.2.25 + TypeScript + Vite + vue-router + pinia ,摈弃了webpack 和vuex 替代为vite 和pinia,
本项目的创建过程 可查阅 从零搭建本项目指南
1、ESLint
2、Prettier - Code formatter
3、Stylelint
4、Vue Language Features (Volar)
5、Path Intellisense
6、TypeScript Importer
7、markdownlint
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true //保存自动修复, eslint.autoFixOnSave已废弃
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true,
"stylelint.validate": [
"css",
"scss",
"less",
"styl",
"vue"
],
建议先下载 yarn 再开始立项,否则同含义的 npm 代码只能自行百度
yarn create vite
输入项目名
选择使用的模板,选vue
选vue-ts
cd 项目名
yarn //下载包
yarn add pinia
yarn dev //运行
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>
改为
<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default defineComponent({
components: { HelloWorld },
});
</script>
<script lang="ts">
import { defineComponent } from "vue";
import { ref } from "vue";
export default defineComponent({
props: {
msg: String,
},
setup() {
const count = ref(0);
return {
count,
};
},
});
</script>
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const app = createApp(App);
app.use(createPinia());
app.mount("#app");
import { defineStore } from "pinia";
export const IndexStore = defineStore("index", {
state: () => ({
counter: 0,
name: "Eduardo",
}),
getters: {
doubleCount: (state: any) => state.counter * 2,
},
actions: {
resetCounter(param: any) {
this.counter = param;
},
},
});
import { IndexStore } from "../stores/main";
setup() {
const indexStore = IndexStore();
const addCounter = () => {
indexStore.$patch({ counter: indexStore.counter + 1 })
};
return {
indexStore,
addCounter,
};
}
<span>{{ indexStore.counter }}*2={{ indexStore.doubleCount }}</span>
// 甚至可以这样
indexStore.counter++;
yarn add vue-router
// src/route/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const routes = [
{ path: "/", redirect: "/home" },
{
path: "/home",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
];
const router = createRouter({
history: createWebHashHistory(),
routes: routes,
});
export default router;
// src/views/Home.vue
<template>
<div>首页</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return {};
},
});
</script>
<style scoped></style>
// src/views/About.vue
<template>
<div>关于我们</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return {};
},
});
</script>
<style scoped></style>
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
import router from './route/index'
const app=createApp(App)
app.use(createPinia());
app.use(router);
app.mount('#app')
// src/App.vue
<template>
<router-view></router-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({});
</script>
<style>
</style>
yarn add less
yarn add @types/node --dev
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
const resolve = (dir: string): string => path.resolve(__dirname, dir);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
alias: [
{ find: "@", replacement: resolve("src") },
],
},
});
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*":["./*"],
}
}
}
{
"extends": "./tsconfig.paths.json",
// 后面的部分不要动
"compilerOptions": .....
import Hello from "@/
// 基本的less变量
@borderColor: #c8c8c8;
@containerWidth: 1190px;
@titleColor: #5b9be9;
@textColor: #333;
export default defineConfig({
// ... 其他的配置不变
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "${path.resolve(
__dirname,
"./src/styles/variable.less"
)}";`,
},
},
},
// ... 其他的配置不变
});
yarn ant-design-vue@next
<template>
<Button type="primary">哈哈哈哈</Button>
</template>
<script lang="ts">
import { Button } from 'ant-design-vue';
import 'ant-design-vue/es/button/style/css';
export default defineComponent({
components:{Button,},
});
</script>
yarn add vite-plugin-style-import@1.4.1 -D
// 由于 vite-plugin-style-import 的最新版本(2.0.0) 有bug 所以降级使用 1.4.1
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
import styleImport from 'vite-plugin-style-import'
const resolve = (dir: string): string => path.resolve(__dirname, dir);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
styleImport({
libs: [{
libraryName: 'ant-design-vue',
esModule: true,
resolveStyle: (name) => {
return `ant-design-vue/es/${name}/style/css`;
},
}]
}),
vue(),
],
resolve: {
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
alias: [{ find: "@", replacement: resolve("src") }],
},
});
yarn add swagger-to-ts -D
"scripts": {
"doc": "swagger-to-ts --docUrl http://127.0.0.1:8082/v2/api-docs --outputDir apitypes"
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。