关于vue.js:实现从0搭建基于Vite的Vue项目

之前试过从 0 搭建一个基于 webpack 的 Vue 我的项目，当初再尝试下从 0 搭建一个基于 vite 的 Vue 我的项目，目标在于相熟 Vite 的流程，不然咱们在应用 webpack 或者 vite 的时候，对整个过程都是不清不楚的。

初始化

创立文件夹，并用 vscode 关上

npm init -y

装置依赖

npm i vite --save
npm i vue@next --save // 目前 vue 默认装置版本还是 2 所以咱们在装置的时候须要指定版本
npm i @vitejs/plugin-vue --save--dev
npm install vuex@next --save
npm install vue-router@4.0 

创立必要的文件夹以及文件

src/App.vue
src/index.html
src/main.ts
vite.config.js
src/router/index.ts
src/shims-vue.d.ts

index.html

参考官网，index.html 须要放到根目录; 如果不放在根目录也能够，须要在 vite.config.ts 中配置 root 即可。

<script type="module" src="./src/main.ts"></script>

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router);
app.mount('#app');

vite.config.ts

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({plugins: [vue()],
})

package.json

增加执行命令，启动我的项目

 "scripts": {
  "test": "echo \"Error: no test specified\"&& exit 1",
  "serve": "vite"
 },