專案搭建
vite
//yarn的下載vite方式
yarn create vite-app <projectName>
//or
//npm的下載vite方式
npm init vite-app <projectName>
//以上方式自行選擇即可
vue-cli
如果已經全域安裝過舊版本的vue-cli，先卸載，
yarn global remove vue-cli
//or
npm uninstall vue-cli -g
安裝新版的@vue/cli
yarn global add @vue/cli
//or
npm install -g @vue/cli
//檢查下vue版本號
vue -V
//創建專案
vue create <projectName>
備注：
vite 是一個由原生ESM驅動的Web開發
構建工具，打開 vite 依賴的 package.json 可以發現在 devDependencies 開發依賴里面已經引入了TypeScript ，甚至還有 vuex , vue-router , less , sass 這些本地開發經常需要用到的工具，vite 輕量，開箱即用的特點，滿足了大部分開發場景的需求，作為快速啟動本地 Vue專案來說，這是一個非常完美的工具，
vue-cli搭建專案
vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更強調的是用 cli 的方式進行互動式的配置，選擇起來更加靈活可控，豐富的官方插件適配，GUI的創建管理界面，標準化開發流程，這些都是 vue-cli 的特點，
選擇 手動選擇功能 Manually select features
備注： 想要預裝什么，就手動check什么（即使前期忘記勾選，后期也可以加裝），
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行，
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進式Web應用程式
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 前處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測驗（unit tests）
( ) E2E Testing // e2e（end to end） 測驗
例如： 忘記使用選擇 TypeScript 也沒事，加一行cli命令就行了
vue add typescript
最后，別忘了在 .vue 代碼中，給 script 標簽加上 lang=“ts”
<script lang="ts">
vite搭建專案（重點講）
- 創建
yarn create vite-app <projectName>
//or
npm init vite-app <projectName>
//進入
cd projectName
//安裝依賴
yarn install
//啟動
yarn dev
訪問：http://localhost:3000
上圖可以看到新建的專案結構與vue-cli4創建的專案結構基本一樣，都是App.vue和main.js
查看main.js檔案內容
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
發現創建Vue的方式變了，原來是new Vue來初始化Vue，但在Vue3.0中，修改為了通過createApp的方式；
Vue3中文檔案
配置專案
配置typescript
1、安裝typescript
yarn add typescript -D
2、初始化 tsconfig.json
//執行命令 初始化 tsconfig.json
npx tsc --init
3、將main.js修改為main.ts
其他的參考也修改為main.ts,也需要將其他頁面的 <script> 修改為 <script lang="ts">
4、配置 ts 識別vue檔案,在專案根目錄添加shim.d.ts檔案
添加以下內容
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
配置Vue Router
Vue Router 4.0 ，變化請查看 Github 中完整的細節，
目前版本beta: v4.0.12, yarn 進行安裝需要帶上版本號
1、安裝vuex
yarn add [email protected]
// or
yarn add vue-router@next
2、安裝完后配置vue-router
在專案src目錄下面新建router目錄，然后添加index.ts檔案，添加以下內容
// import VueRouter from 'vue-router'
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter來創建路由
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`
// })
3、將router引入到main.ts中,修改main.ts檔案
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
// import router 后創建并掛載根實體，
const app = createApp(App)
// 確保 t_use_ 實體來創建router, 將路由插件安裝到 app 中
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
配置Vuex
Vuex 4.0 ，變化請查看Github
目前版本beta: v4.0.2
1、安裝vuex
yarn add vuex@4
//或者
yarn add vuex@next
2、安裝完后配置vuex
在專案src目錄下面新建store目錄，并添加index.ts檔案，添加以下內容
import { createStore } from 'vuex'
interface State {
userName: string
}
export default createStore({
state(): State {
return {
userName: "vuex",
};
},
});
配置Ant Design Vue
具體使用方式請參考：官方檔案
1、引入ant-design-vue
yarn add ant-design-vue@next
2、在main.ts中引入
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 后創建并掛載根實體，
const app = createApp(App)
// 確保 t_use_ 實體來創建router
// 整個應用程式路由器感知，
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/427447.html
標籤：其他