最近在重構一個老專案，領導要求使用新的技術www.cppcns.com棧。好吧，是時候秀一波我新學的vue3.0了。

不多bb，開始我的表演。。。(以下只是我自己個人的理解和使用習慣，僅供參考哦）

一：專案搭建

1. 可以自己配置vite，但是為了節省時間，我就使用腳手架直接搭建。(有興趣可以研究一下vite，還是很香的)

2. 專案生成：iTerm下： vue create myproject

之後根據自己的要求選擇不同的配置

選擇我們需要的3.x

之後按照要求配置一下router，已經pack.json 。。。 然後npm run serve

ok。一個基本的3.0專案搭建完成，結束。(那是不可能的)

二： 目錄結構

原始的目錄結構如下所示：

為了方便數xqGBN據管理，我們需要自定義一些其他的檔案。下面是一個簡單的demo結構：

hooks用來定義一些公共元件的方法，可以在多個元件裡面複用，也可以和vuex聯用。

typing定義一些你需要使用的ts型別。比如:

根據不同的元件拆分不同的型別，然後統一在index中匯出。index中可以定義一些公共的型別。

request定義一些http請求。

base.ts基本路徑

api.ts合集api

http.ts 可以做一下axios請求攔截和配置一下環境。(development， product）

整體配置大致就是這樣，把api，以及ts型別集中起來，更方便之後的管理。

在元件內部也需要拆分：

這是一個about頁面。分為.vue檔案和一個內部Hooks的資料夾。.vue檔案是基本demo結構。hooks裡面根據不同的功能拆分不同的檔案。比如：listDownHooks.ts檔案就是用來出來下拉選單的方法集合。還可以單獨拆分一個樣式檔案，(我覺得有點麻煩就沒做..)

目錄結構就是這樣。先在typing定義基本的資料型別，然後再每個元件下的Hooks裡面的方法中引入之後在.vue檔案裡面使用對應的方法。

三： Composition Api

Composition Api是一組基於功能的附加API，可以靈活地組合元件邏輯。配合ts食用更佳~~~

1. defineComponent

從Composition Api中解構出來，配合ts。 定義一個元件：

export defaultdefineComponent({});

如果你不使用ts，也可以使用export default {} 的寫法。

2. setup

Composition Api核心的部分，是vue3.0的亮點。替代之前beforeCreate和created生命週期。

可以在sexqGBNtup中初始化一些響應式資料。

setup(props,ctx) 接受兩個引數，props和ctx(上下文).

props是傳統的父傳子資料。不建議在setup中解構props，這樣會使prophttp://www.cppcns.coms失去響應。

ctx中可以解構出，slots，attrs， emit，用法類同於2.0。

3. ref和reactive

用來建立響應式資料的方法。從vue中解構出來 => import {ref,reactive} from 'vue';

ref使用：

import {ref,defineComponent} from 'vue';
export default defineComponent({
 setup() {
  const number = ref(0);
  console.log(number); 
  return {
   number
  }
 }
})

通過ref建立程式設計客棧一個響應式資料，console看一下。

這是一個ref式響應資料，我們在操作的時候通過number.value來操作資料,然後把結果return回去。

ref 宣告基本型別和引用型別的區別？

ref宣告基本型別，是建立了一個ref的響應式物件

ref宣告引用型別，也是建立了一個ref的物件，但是內部是用reactive方法包裝的響應式物件

如果你的ref物件被更改在一個reactive裡面，可以直接通過key，value方法獲取

reactive使用：

import {reactive,defineComponent,toRefs} from 'vue';
export default defineComponent({
 setup() {
  const obj = reactive({   
    menuList: [] as Array<T>
   });
  console.log(number); 
  return {
    ...toRefs(obj);
  }
 }
})

建立一個proxy式的響應資料。通過toRefs將資料return回去。內部是這樣的：

個人覺得：一些基本型別可以多使用ref定義，對於一個整體的定義，可以使用reactive。

其他：

其他的一些常用的方法比如：computed， watch，等其實用法和2.0差不多。這裡不多描述。

四： 基本使用：

用一個基本的新聞列表為例。

主要就是在mounted階段調取資料，在翻頁的時候重新整理資料。

目錄：

src -> views -> News -> Hook ->newsListHook.ts (用來處理列表資料)

在檔案中定義一下原始資料。

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList是資料型別 
});

定義一個newsList() 方法，內部包含一個getList方法用來獲取介面資料。一個方法分頁請求時候觸發，把getList在mounted掛載。之後將資料和方法return出去。程式碼如下：

/** * 1. 列表請求資料 */import api from '../../../request/api';
import {reactive,onMounted} from 'vue';
import {InewsList} from '../../../typing';
export function newsList(): object { 
 let dataSource = reactive({list: [] as Array<InewsList>});
 function getList(obj: object): void {
  api.newsList(obj).then(res => {
   dataSource.list = res.data.data; })
 };
 function onChange(e: any): void {
  let start = e || 10;
  const obj = {start,num: 10};
  getList(obj);
 }; 
 onMounted(() => {
  const startObj = {start: 1,num: 10};
  getList(startObj);
 }); 
 return {
  dataSource,getList,onChange
}}

之後src -> views -> News ->News.vue檔案中使用。

import {newsList} from './Hook/newslistHook';
export default defineComponent({ 
  name: 'news',setup() { 
  const list = newsList();
  return {
   ...list // list中包含著所有定義的資料和方法。
  } 
}})

console一下list：

這樣就可以直接在vue檔案中渲染使用了。

總結一下：把需要用的方還有一些事件(click,mousedown,keyup...)可以放在hook中執行，vue檔案就是用來資料渲染。

專案中使用到了antd的Vue框架，大家在使用的時候最好按需載入。畢竟antd太大啦。

import Menu from 'ant-design-vue/es/menu/index'
import Select from 'ant-design-vue/es/select/index'
createApp(App).use(store).use(router).use(Menu).use(Select)

好啦，就到這裡啦。新人嘗試寫vue3.0，不足地方多多指出哦。

以上就是vue3.0 專案搭建和使用流程的詳細內容，更多關於vue3.0 專案搭建和使用的資料請關注我們其它相關文章！