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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

知识储备

Tips: 如果项目要求考虑IE11及以下的兼容，请移步。

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

  • Vue3

  • Vite

  • 10分钟了解Vite

  • typeScript

  • Element-plus

为什么要使用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 ></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

以上是 vue3+vite+ts+element-plus项目搭建 的全部内容， 来源链接： utcz.com/z/378159.html

回到顶部