之前试过从0搭建一个webpack项目,现在再尝试下从0搭建一个vite项目,目的在于更加熟悉整个项目的流程,不然我们在使用webpack或者vite的时候,对整个过程不清不楚的。
初始化
创建文件夹,使用vscode打开
npm init -y
安装依赖
npm i vue@next --save // 目前vue默认安装版本还是2 所以我们在安装的时候需要指定版本
npm i vite --save
npm i @vitejs/plugin-vue --save--dev
npm install vuex@next --save
npm install vue-router@4.0
创建文件夹&文件
创建src目录
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需要放到根目录
改动点:
<script type="module" src="./src/main.ts"></script>
<div id="app></div>
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');
router/index.ts
import { createRouter,createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes:RouteRecordRaw[] = [];
export default createRouter({
histtory: createWebHashHistory(),
routes
})
vite.config.js
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"
},