vue3+vite+ts+element-plus项目搭建
知识储备
Tips: 如果项目要求考虑IE11及以下的兼容，请移步。
开始项目搭建前，你需要知道
为什么要使用Vite?
- 启动快；
- 热更新快；
- 有效避免大型项目代码调试时，修改一行代码编译等半天的问题；
环境要求
- node版本建议V12+
在进行下面步骤前，建议将npm 或 yarn的镜像源修改为Tao宝或Hua为镜像源可以选择在项目的根目录中添加一个.npmrc文件，或者直接使用命令修改npm或yarn的镜像源地址,这里我使用的是npmrc的方式，修改的代码在下面，有需要请自取。
Tao宝镜像源(npmrc)
registry=https://registry.npm.taobao.org
disturl=https://npm.taobao.org/dist
electron_mirror=https://npm.taobao.org/mirrors/electron/
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
puppeteer_download_host=https://npm.taobao.org/mirrors/
selenium_cdnurl=https://npm.taobao.org/mirrors/selenium/
node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector/
Tao宝镜像源(修改config)
#### npm修改镜像源
原npm镜像源
https://registry.npmjs.org/
清除所有npm缓存
npm cache clean --force
查看所有config
npm config list
配置镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set puppeteer_download_host https://npm.taobao.org/mirrors/
npm config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium/
npm config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector/
#### yarn修改镜像源
原yarn镜像源
https://registry.yarnpkg.com
查看所有config
yarn config list
配置镜像
yarn config set registry https://registry.npm.taobao.org/ -g
yarn config set disturl https://npm.taobao.org/dist/ -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/ -g
yarn config set puppeteer_download_host https://npm.taobao.org/mirrors/ --gl
yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver/ -g
yarn config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver/ -g
yarn config set fse_binary_host_mirror https://npm.taobao.org/mirrors/fsevents/ -g
yarn config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium/ --g
yarn config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector/ --g
Hua为镜像源(npmrc)
registry=https://repo.huaweicloud.com/repository/npm/
disturl=https://repo.huaweicloud.com/nodejs
sass_binary_site=https://repo.huaweicloud.com/node-sass
phantomjs_cdnurl=https://repo.huaweicloud.com/phantomjs
chromedriver_cdnurl=https://repo.huaweicloud.com/chromedriver
operadriver_cdnurl=https://repo.huaweicloud.com/operadriver
electron_mirror=https://repo.huaweicloud.com/electron/
python_mirror=https://repo.huaweicloud.com/python
项目搭建
step1 初始化项目
1、 npm install vite-app <项目的名称>
2、 cd <项目的名称>
3、 npm install
4、 npm run dev
step2 安装依赖
根据package.json进行相关依赖项的安装
点击查看代码
"dependencies": {
"axios": "^0.21.1",
"element-plus": "^1.2.0-beta.6",
"vue": "^3.0.5",
"vue-router": "^4.0.5",
"vuex": "^4.0.0"
},
"devDependencies": {
"@types/node": "^14.14.37",
"@vitejs/plugin-vue": "^1.2.1",
"@vue/compiler-sfc": "^3.0.5",
"axios-mapper": "^0.5.4",
"sass": "^1.32.8",
"typescript": "^4.1.3",
"vite": "^2.1.5",
"vue-tsc": "^0.0.15"
}
step3 修改配置
新增vite.config.ts
在项目的根目录下，创建vite.config.ts 文件，默认没有该文件。vite的配置项很丰富，具体可以去Vite官网了解。
点击查看代码
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default ({ command, mode }) => {
console.log("command", command);
console.log("mode", mode);
return {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"apis": path.resolve(__dirname, "src/apis"),//具体需要哪些，请按需添加
"models": path.resolve(__dirname, "src/model"),
"utils": path.resolve(__dirname, "src/utils"),
"comps": path.resolve(__dirname, "src/components"),
"router": path.resolve(__dirname, "src/router"),
"views": path.resolve(__dirname, "src/views"),
"layout": path.resolve(__dirname, "src/layout"),
},
},
plugins: [vue()],
};
};
新增tsconfig.json
同上，该文件也需要自行在根目录下创建。
点击查看代码
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client", "node"],
"paths": {
"@/*": ["./src/*"],
"apis/*": ["./src/apis/*"],
"model/*": ["./src/model/*"],
"utils/*": ["./src/utils/*"],
"comps/*": ["./src/comps/*"],
"config/*": ["./src/config/*"],
"views/*": ["./src/views/*"],
"layout/*": ["./src/layout/*"],
"router/*": ["./src/router/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["src/apis/*.js"]
}
修改App.vue
将src/App.vue文件修改为如下内容
点击查看代码
<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent, provide, ref } from "vue";
export default defineComponent({
name: "App",
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
修改index.html
将原本的入口文件，src/main.js修改为main.ts
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> <!-- this line!!! -->
</body>
</html>
修改src/main.js的文件类型为main.ts
点击查看代码
import {createApp} from 'vue'
import router from 'router/index'
import ElementPlus from 'element-plus'
import App from './App.vue'
import './index.css'
const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');
在src目录下新增shims-vue.d.ts文件
点击查看代码
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
在src目录下新增router/index.ts
点击查看代码
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import("/@/views/index.vue")
},
]
export default createRouter({
history: createWebHistory(),
routes
})
在src目录下，新增views/index.vue,views/HelloWorld.vue
点击查看代码(index.vue)
<template>
<HelloWorld :msg="msg"></HelloWorld>
</template>
<script lang="ts">
import HelloWorld from "./HelloWorld.vue"
import { defineComponent } from "vue";
export default defineComponent({
name: "Home",
components: { HelloWorld },
setup() {
return {
msg: "hello World",
};
},
});
</script>
点击查看代码(HelloWord.vue)
<template>
<h1>{{ msg }}</h1>
<button @click="realTime.count++">count is: {{ realTime.count }}</button>
<button @click="handleclick">点击跳转其它路由</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue"
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'Index',
props: { msg: { type: String, default: '欢迎来到vue3' } },
setup(props) {
const router = useRouter();
let realTime = reactive({ count: 0 });
function handleclick() {
router.push({ path: '/other' })
}
return {
msg: props.msg,
realTime,
handleclick
}
}
})
</script>
step4 运行
npm run dev
