vite+vue3.0+ts+element-plus快速搭建项目的实现

目录

vite 作用使用的环境搭建项目
配置vite.config.tstsconfig.jsonApp.vueViewsroutermain.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\'

至此项目搭建完成，可以愉快的写代码了。