vue3&vite

放棄webpack,使用vite安裝vue3.0

這個是尤大開發的新工具，目的是以后替代webpack，原理是利用瀏覽器現在已經支持es6的import了，遇到import會發送一個http請求去加載文件，vite攔截這些請求，做一些預編譯，省去了webpack冗長打包的時間，提升開發體驗npm install -g create-vite-app

create-vite-app

cd vue3-vite

npm install

npm run dev

# 或者使用yarn

yarn add -g create-vite-app

yarn create vite-app

yarn

yarn dev

引入typescript# 安裝 typescript

yarn add typescript -D

初始化tsconfig.jsonnpx tsc --init

將main.js修改為main.ts,同時將index.html里面的引用也修改為main.ts,

然后在script 里添加 lang="ts"

import HelloWorld from './components/HelloWorld.vue'

export default {

name: 'App',

components: { HelloWorld }

}

修改完之后，重啟就可以訪問項目了。雖然這樣配置是可以了，但是打開main.ts會發現import App from App.vue會報錯,這是因為現在ts還沒有識別vue文件，需要進行下面的配置:

在項目根目錄添加shim.d.ts文件，添加以下內容declare module "*.vue" {

import type { DefineComponent } from "vue";

const component: DefineComponent;

export default component;

}

安裝vue-routeryarn add vue-router@4.0

這樣可以選擇最新的vue-router 4.0.0的測試版本,這里更新到beta.13

配置vue-router

在項目src目錄下面新建router目錄，然后添加index.ts文件，在文件中添加以下內容import { createRouter, createWebHashHistory } from "vue-router";

// 在 Vue-router新版本中，需要使用createRouter來創建路由

export default createRouter({

// 指定路由的模式,此處使用的是hash模式

history: createWebHashHistory(),

// 路由地址

routes: [],

});

安裝vuex

同上yarn add vuex@4.0

目前只能選擇最新測試版

在項目src目錄下面新建store目錄，并添加index.ts文件，文件中添加以下內容import { createStore } from "vuex";

interface State {

userName: string;

}

export default createStore({

state: { userName: "xiuluo" },

});

main.ts中引入vuex和vue-routerimport { createApp } from 'vue'

import App from './App.vue'

import './index.css'

import router from './router/index'

import vuex from './store/index'

const app = createApp(App)

app.use(router)

app.use(vuex)

app.mount('#app')

vuex

使用vuex

效果

總結

以上是生活随笔為你收集整理的vue2 怎么用vite_vue3vite简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。