如何搭建一個(gè)vue3.0 項(xiàng)目

這篇文章將為大家詳細(xì)講解有關(guān)如何搭建一個(gè)vue3.0 項(xiàng)目，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

一：項(xiàng)目搭建

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

2. 項(xiàng)目生成：iTerm下： vue create myproject

之后根據(jù)自己的要求選擇不同的配置

選擇我們需要的3.x

之后按照要求配置一下router，已經(jīng)pack.json 。。。 然后npm run serve

ok。一個(gè)基本的3.0項(xiàng)目搭建完成，結(jié)束。(那是不可能的)

二： 目錄結(jié)構(gòu)

原始的目錄結(jié)構(gòu)如下所示：

為了方便數(shù)據(jù)管理，我們需要自定義一些其他的文件。下面是一個(gè)簡單的demo結(jié)構(gòu)：

hooks用來定義一些公共組件的方法，可以在多個(gè)組件里面復(fù)用，也可以和vuex聯(lián)用。

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

根據(jù)不同的組件拆分不同的類型，然后統(tǒng)一在index中導(dǎo)出。index中可以定義一些公共的類型。

request定義一些http請(qǐng)求。

base.ts基本路徑

api.ts合集api  

http.ts 可以做一下axios請(qǐng)求攔截和配置一下環(huán)境。(development， product）

整體配置大致就是這樣，把a(bǔ)pi，以及ts類型集中起來，更方便之后的管理。

在組件內(nèi)部也需要拆分：

這是一個(gè)about頁面。分為.vue文件和一個(gè)內(nèi)部Hooks的文件夾。.vue文件是基本demo結(jié)構(gòu)。hooks里面根據(jù)不同的功能拆分不同的文件。比如：listDownHooks.ts文件就是用來出來下拉菜單的方法集合。還可以單獨(dú)拆分一個(gè)樣式文件，(我覺得有點(diǎn)麻煩就沒做..)

目錄結(jié)構(gòu)就是這樣。先在typing定義基本的數(shù)據(jù)類型，然后再每個(gè)組件下的Hooks里面的方法中引入之后在.vue文件里面使用對(duì)應(yīng)的方法。

三： Composition Api

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

1. defineComponent

從Composition Api中解構(gòu)出來，配合ts。 定義一個(gè)組件：

export default defineComponent({});

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

2. setup

Composition Api核心的部分，是vue3.0的亮點(diǎn)。替代之前beforeCreate和created生命周期。

可以在setup中初始化一些響應(yīng)式數(shù)據(jù)。

setup(props, ctx) 接受兩個(gè)參數(shù)，props和ctx(上下文).

props是傳統(tǒng)的父?jìng)髯訑?shù)據(jù)。不建議在setup中解構(gòu)props，這樣會(huì)使props失去響應(yīng)。

ctx中可以解構(gòu)出，slots，attrs， emit，用法類同于2.0。

3. ref和reactive

用來創(chuàng)建響應(yīng)式數(shù)據(jù)的方法。從vue中解構(gòu)出來  =>    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創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，console看一下。

這是一個(gè)ref式響應(yīng)數(shù)據(jù)，我們?cè)诓僮鞯臅r(shí)候通過number.value來操作數(shù)據(jù),然后把結(jié)果return回去。

ref 聲明基本類型和引用類型的區(qū)別？

ref聲明基本類型，是創(chuàng)建了一個(gè)ref的響應(yīng)式對(duì)象

ref聲明引用類型，也是創(chuàng)建了一個(gè)ref的對(duì)象，但是內(nèi)部是用reactive方法包裝的響應(yīng)式對(duì)象

如果你的ref對(duì)象被更改在一個(gè)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);
  }
 }
})

創(chuàng)建一個(gè)proxy式的響應(yīng)數(shù)據(jù)。通過toRefs將數(shù)據(jù)return回去。內(nèi)部是這樣的：

個(gè)人覺得：一些基本類型可以多使用ref定義，對(duì)于一個(gè)整體的定義，可以使用reactive。

其他：

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

四： 基本使用：

用一個(gè)基本的新聞列表為例。

主要就是在mounted階段調(diào)取數(shù)據(jù)，在翻頁的時(shí)候刷新數(shù)據(jù)。

目錄：

src -> views -> News -> Hook ->newsListHook.ts (用來處理列表數(shù)據(jù))

在文件中定義一下原始數(shù)據(jù)。

let dataSource = reactive({
 list: [] as Array<InewsList> // InewsList是數(shù)據(jù)類型 
});

定義一個(gè)newsList() 方法，內(nèi)部包含一個(gè)getList方法用來獲取接口數(shù)據(jù)。一個(gè)方法分頁請(qǐng)求時(shí)候觸發(fā)，把getList在mounted掛載。之后將數(shù)據(jù)和方法return出去。代碼如下：

/** * 1. 列表請(qǐng)求數(shù)據(jù) */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中包含著所有定義的數(shù)據(jù)和方法。
  } 
}})

console一下list：

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

總結(jié)一下：把需要用的方還有一些事件(click, mousedown, keyup...)可以放在hook中執(zhí)行，vue文件就是用來數(shù)據(jù)渲染。

項(xiàng)目中使用到了antd的Vue框架，大家在使用的時(shí)候最好按需加載。畢竟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)

關(guān)于如何搭建一個(gè)vue3.0 項(xiàng)目就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。