vue3+vite+ts+element-plus项目搭建

2024-04-24 21:11•数据库•阅读 1443

知识储备

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 >
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 >
  <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 ></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 >
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 >
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

上一篇 »如何开发一款基于 vite+vue3 的在线表格系统？下
下一篇 »如何开发一款基于 Vite+Vue3 的在线表格系统？上

vue3+vite+ts+element-plus项目搭建

知识储备

开始项目搭建前，你需要知道

为什么要使用Vite?

环境要求

项目搭建

step1 初始化项目

step2 安装依赖

step3 修改配置

新增vite.config.ts

新增tsconfig.json

修改App.vue

修改index.html

修改src/main.js的文件类型为main.ts

在src目录下新增shims-vue.d.ts文件

在src目录下新增router/index.ts

在src目录下，新增views/index.vue,views/HelloWorld.vue

step4 运行

相关推荐

vue3中实现使用element-plus调用message

利用Vue3+Element-plus实现大文件分片上传组件

vue3创建项目，系列一

Storybook 7.0 Beta Vue3踩坑解决记录

Storybook 7.0 Beta Vue3踩坑解决记录

一文详解如何在Vue3+Vite中使用JSX？

怎么使用vite+vue3.0+ts+element-plus搭建项目？

Vue3+TypeScript 项目中，配置 ESLint 和 Prettier