快速开始,使用vite创建项目
npm init vite-app my-test (or `yarn create vite-app <projectname>`)
cd my-test
npm install (or `yarn`)
npm run dev (or `yarn dev`)
或者
npm install -g create-vite-app
create-vite-app <projectname>
cd <projectname>
npm install (or `yarn`)
npm run dev (or `yarn dev`)
集成ts,安装后在package.json中可以看到devDependencies中有ts
yarn add --dev typescript
npx tsc --init
修改main.js为main.ts,修改index.html的src="/src/main.js"为src="/src/main.ts"
修改App.vue和components/HelloWorld.vue在script中加入lang="ts" 如
创建shim.d.ts文件,用于消除main.ts中的报错(ts文件不识别.vue文件),内容如下:
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
引入vue-router
yarn add vue-router@next
或者yarn add vue-router@4.0选择具体版本
import { createRouter, createWebHashHistory } from "vue-router"
export default createRouter({
history: createWebHashHistory(),
routes: []
})
引入vuex
yarn add vuex@@next
#选择4.0.0-beta.4版本
import { createStore } from 'vuex'
interface State {
userNaem: string
}
export default createStore({
state:{
userName: '王大锤'
}
})
其他引入、 引入ant-design-vue、sass
yarn add ant-design-vue@next
yarn add -D babel-plugin-import
yarn add -D sass
yarn add @ant-design/colors
yarn add -D eslint eslint-plugin-vue
配置.eslintrc.js文件
module.exports = {
extends: [
// add more generic rulesets here, such as:
// "eslint:recommended",
"plugin:vue/vue3-recommended",
// "plugin:vue/recommended" // Use this if you are using Vue.js 2.x.
],
rules: {
// override/add rules settings here, such as:
"vue/no-multiple-template-root": "off",
},
};
配置main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router';
import store from './store';
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.use(router);
app.use(store);
app.use(Antd);
app.mount('#app');
至此项目基本配置完成