目录
- vite 作用
- 使用的环境
- 搭建项目
- 配置
- vite.config.ts
- tsconfig.json
- App.vue
- Views
- router
- main.ts
vite 出了 2.x 版本，抱着学一学的心态决定出个简单的项目，结合 element-plus，以及将会成为每位前端必会的 typescript，实现了如下内容。
vite是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。
vite 作用
- 快速的冷启动：不需要等待打包操作；
- 即时的热模块更新：替换性能和模块数量的解耦让更新飞起；
- 真正的按需编译：不再等待整个应用编译完成，这是一个巨大的改变。
使用的环境
- node v12.19.0
- @vue/cli 4.5.8
搭建项目
npm init vite-app <project-name> cd <project-name> npm install npm run dev
或
yarn create vite-app <project-name> cd <project-name> yarn yarn dev
配置
vite.config.ts
vite.config.ts 相当于 @vue-cli 项目中的 vue.config.js
import path from "path";
const pathResolve = (pathStr: string) => {
return path.resolve(__dirname, pathStr);
}
const config = {
base: './',//在生产中服务时的基本公共路径。@default '/'
alias: {
'/@/': pathResolve('./src'),
},
outDir: 'vite-init',//构建输出将放在其中。会在构建之前删除旧目录。@default 'dist'
minify: 'esbuild',//构建时的压缩方式
hostname: 'localhost',//本地启动的服务地址
port: '8800',//服务端口号
open: false,//启动服务时是否在浏览器打开
https: false,//是否开启https
ssr: false,//是否服务端渲染
optimizeDeps: {// 引入第三方的配置
include: ['axios']
},
// proxy: {//代理配置
// '/api': {
// target: 'http://xx.xx.xx.xx:xxxx',
// changeOrigin: true,
// ws: true,
// rewrite: (path: string) => { path.replace(/^\/api/, '') }
// }
// }
}
module.exports = config;
tsconfig.json
{
"compilerOptions": {
"target": "ES5",//指定ECMAScript的目标版本:'ES3'(默认)，'ES5'， 'ES2015'， 'ES2016'， 'ES2017'， 'ES2018'， 'ES2019'， 'ES2020'，或'ESNEXT'。
"module": "commonjs",//指定模块代码生成:'none'， 'commonjs'， 'amd'， 'system'， 'umd'， 'es2015'， 'es2020'，或'ESNext'。
"strict": true,//是否启用所有严格的类型检查选项。
"baseUrl":"./",//用于解析非绝对模块名称的基本目录。
"paths": {
"/@/*": ["./src/*"]
},
"noImplicitAny": true, //对于隐含有'any'类型的表达式和声明引发错误。
"esModuleInterop": true, //通过为所有导入创建名称空间对象，实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。
"experimentalDecorators": true, //支持对ES7装饰器的实验性支持。
"skipLibCheck": true, //跳过声明文件的类型检查。
"forceConsistentCasingInFileNames": true //禁止对同一文件使用大小写不一致的引用。
}
}
App.vue
修改app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<router-view />
</template>
<script>
export default {
name: 'App',
setup() {
}
}
</script>
Views
在 src 下新建 views文件夹，并在文件夹内创建 index.vue
<template>
<HelloWorld :msg="msg"></HelloWorld>
</template>
<script lang="ts">
import HelloWorld from "/@/views/HelloWorld.vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Home",
components: { HelloWorld },
setup() {
return {
msg: "hello World",
};
},
});
</script>
PS：在引入.vue文件时一定要带上后缀名，否则会报找不到文件
在views文件夹内创建 HelloWorld.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>
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>
router
在 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
})
main.ts
把原本的main.js改为main.ts,修改后别忘记把index.html里面也改为main.ts
import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './reset.css'
const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');
细心的同学这时可能已经发现：在 ts 文件中引入 .vue 文件时出现以下报错，但是不影响代码正常运行
报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件
解决方法：在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件，并写入以下内容：
declare module '*.vue' { }
declare module '*.js'
declare module '*.json';
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
至此项目搭建完成，可以愉快的写代码了。
到此这篇关于vite+vue3.0+ts+element-plus快速搭建项目的实现的文章就介绍到这了,更多相关vite+vue3.0+ts+element-plus搭建内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！
