从0开始创建vue3.0+vite+ts（一）

因为最近vue3.0+比较热门，并且众多UI均兼容vue3.0+，也有越来越多的公司开始升级使用vue3.0+脚手架，从而从0开始创建vue3.0+是很有必要的

今天讲讲搭建基本的脚手架

1. 创建新项目
   
2. 引入路由
   
3. 引入CSS 预处理语言
   
4. 引入UI，这里以element-plus为例

新建vite+vue3.0+typescipt项目

如何创建项目

npm init vite@latest
或
yarn create vite

创建完成后，首先想到的是路由

npm install vue-router
或
yarn add vue-router

配置路径别名 @，配置路由router.ts

在 vite.config.ts 中配置

// 在vite.config.ts中配置
const { resolve } = require("path");
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});

在路由 router.ts 中使用

// 在路由router.ts中使用
import {
  createRouter,
  createWebHistory,   // 路径不带#号 (生产环境下不能直接访问，需要nginx重定向)
  createWebHashHistory,  // 路径带#号
} from "vue-router";
const routes = [
  //路由重定向
  {
    path: "/index",
    redirect: "/",
  },
  {
    path: "/",
    name: "index",
    title: "首页",
    component: () => import("@/views/index.vue"),
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

main.ts 使用路由 router.ts

import { createApp } from 'vue'
import App from './App.vue'
import Router from '@/router'
createApp(App).use(Router).mount('#app')

配置完路由，接下来配置CSS 预处理语言

// 引用Less
npm install less
或
yarn add less

// 引用scss
npm install scss
或
yarn add scss

通过以上配置即可实现基本开发

引入element-plus

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

在 main.ts 使用 element-plus

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Router from '@/router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(Router).mount('#app')

在 index.vue 使用 element-plus

  <template>
  <div>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </el-row>
  </div>
</template>
<script setup type='ts'>
import { onMounted, nextTick, ref } from 'vue'
</script>
<style lang='less' scoped>
</style>

实际效果完成如下

常见报错

// setup 兼容问题，
// <script setup lang="ts"> 与 setup(props, context){return {}}不能同时使用
<script setup lang="ts">
    // 推荐使用这种，代码量少很多
</script>
或
<script lang="ts">
    export default defineComponent({
      setup(props, context) {
        return {}
      }
    })
</script>

总结：
目前大形势驱动下，项目使用vue3.0+也越来越多
对大项目来说 vite 使得开发编译时长缩短，开发更便捷
<script setup lang="ts">语法糖，优势：更少的样板内容，更简洁的代码，无需return