項(xiàng)目創(chuàng)建

vite的介紹

首先要想使用vite來(lái)創(chuàng)建一個(gè)vue項(xiàng)目，要把vue腳手架升級(jí)成為5.0.1版本，但是有一個(gè)很大的缺陷，就是升級(jí)過后不會(huì)再向下兼容vue2的語(yǔ)法創(chuàng)建項(xiàng)目的方式

腳手架升級(jí)為5.0.1版本：cnpm install vue@next 或 yarn global add @vue/cli 安裝新版@vue/cli

升級(jí)完之后，輸入：vue -V 來(lái)查看腳手架的版本號(hào)

腳手架為5.0.1版本創(chuàng)建項(xiàng)目的語(yǔ)法也變了，原本在4.5.15版本的時(shí)候還可以做到向下兼容使用vue create demo來(lái)創(chuàng)建一個(gè)項(xiàng)目，但是在5.0.1版本時(shí)換了另外一種語(yǔ)法來(lái)創(chuàng)建項(xiàng)目，這時(shí)候你在用老版本的方法去創(chuàng)建項(xiàng)目時(shí)會(huì)說(shuō)‘你的vue-cli已經(jīng)過時(shí)了。請(qǐng)刪除后重新手動(dòng)運(yùn)行vue-cli’

啟動(dòng)項(xiàng)目由npm run serveoryarn serve變成了npm run devoryarn dev，端口號(hào)由原來(lái)的8080端口換成了現(xiàn)在的3000端口

這是新頁(yè)面：

這是老頁(yè)面：

使用vite創(chuàng)建項(xiàng)目

Vite 是一個(gè) web 開發(fā)構(gòu)建工具，由于其原生 ES 模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動(dòng)。

通過在終端中運(yùn)行以下命令，可以使用 Vite 快速構(gòu)建 Vue 項(xiàng)目。

• 使用 npm：

npm init vite@latest '項(xiàng)目名稱' --template vue
cd '項(xiàng)目名稱'
下載依賴：npm install
啟動(dòng)項(xiàng)目：npm run dev

• 使用yarn：

yarn create vite  '項(xiàng)目名稱' --template vue
cd '項(xiàng)目名稱'
yarn
yarn dev

下圖可以看到新建的項(xiàng)目結(jié)構(gòu)與vue-cli4創(chuàng)建的項(xiàng)目結(jié)構(gòu)基本一樣，都是App.vue和main.js

查看main.js文件內(nèi)容

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

createApp(App).mount('#app')

發(fā)現(xiàn)創(chuàng)建Vue的方式變了，原來(lái)是new Vue來(lái)初始化Vue，但在Vue3.0中，修改為了通過createApp的方式； 

vue3官網(wǎng)

配置項(xiàng)目

配置vue-router

Vue Router 4.0 ，變化請(qǐng)查看 Github 中完整的細(xì)節(jié)，

目前版本beta: v4.0.12, yarn 進(jìn)行安裝需要帶上版本號(hào)

1、安裝vue-router

yarn add vue-router@4.0.12
// or
npm install vue-router@next

2、安裝完后配置vue-router

在項(xiàng)目src目錄下面新建router目錄，然后添加index.ts文件，添加以下內(nèi)容

// import VueRouter from 'vue-router'
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter來(lái)創(chuàng)建路由
export default  createRouter({
  // 指定路由的模式,此處使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
//   history: VueRouter.createWebHashHistory(),
//   routes, // short for `routes: routes`
// })

配置Vuex

Vuex 4.0 ，變化請(qǐng)查看Github

目前版本beta: v4.0.2

1、安裝vuex

yarn add vuex@4
//或者
npm install vuex@next

2、安裝完后配置vuex

在項(xiàng)目src目錄下面新建store目錄，并添加index.js文件，添加以下內(nèi)容

import { createStore } from 'vuex'

interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
});

配置Ant Design Vue

具體使用方式請(qǐng)參考：官方文檔

Ant Design Vue 新的ui網(wǎng)站

1、引入ant-design-vue

yarn  add ant-design-vue@next

2、在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'

// import router 后創(chuàng)建并掛載根實(shí)例。
const app = createApp(App)
// 確保 t_use_  實(shí)例來(lái)創(chuàng)建router
// 整個(gè)應(yīng)用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')

@vue/cli降級(jí)方法

如果你想寫vue2的項(xiàng)目，那么就需要把@vue/cli給卸載掉，再重新下載指定版本

首先找到電腦上面的命令提示符（黑窗口）右鍵以管理員身份運(yùn)行

查看當(dāng)前版本：vue -V

• 卸載當(dāng)前腳手架 ：npm uninstall -g @vue/cli
• 安裝指定版本：npm install -g @vue/cli@版本號(hào)
• 這里我采用了 vue cli4 的最高版本4.5.15
• 命令為：npm install -g @vue/cli@4.5.15

成功后：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論