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

知識儲備

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 id="app"></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