Vue3入门 - 项目搭建和配置

最新推荐文章于 2024-09-18 09:53:11 发布

觉醒法师

最新推荐文章于 2024-09-18 09:53:11 发布

阅读量1.8k

点赞数 18

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jiciqiang/article/details/141532568

版权

Vue.js 专栏收录该内容

34 篇文章 12 订阅

订阅专栏

Vue3和Vue2相比，在多个方面展现出了其独特的优势，也存在一些缺点。Vue3在性能、TypeScript支持、组件化和模块化等方面具有显著优势，但也存在学习曲线陡峭、迁移成本高等缺点。在选择使用Vue3还是Vue2时，需要根据项目的具体需求、团队的技术栈以及项目的稳定性要求等因素进行综合考虑。

一、环境搭建

1.1 node环境

对于node版本要求在16.0以及更高的版本。可通过以下命令查看版本：

node -v

如下图：

二、创建Vue项目

2.1 create-vue

以下指令将会安装并执行create-vue，代码如下：

npm init vue@latest

2.2 初始化vue项目

如上图，通过后面的提示执行相关命令，完成项目的初始化。

1）先执行cd my-vue3-pro进入项目目录；

2）再执行npm install 安装依赖包；

3）依赖包安装好后，就可以执行npm run dev 运行项目了。

最后项目启动运行，如下图：

三、axios

axios安装，命令如下：

yarn add axios
// 或通过npm安装
npm install axios

axios在之前篇幅中已讲过，如对此不熟悉朋友可翻看下，地址：Vue.js快速入门之四：axios安装和使用_安装axios-CSDN博客

四、Pinia

Pinia是Vue的专属状态管理库，它允许人跨组件或页面共享状态，是vuex的替代品。

4.1 安装

使用你习惯的安装方式安装Pinia，代码如下：

yarn add pinia
// 或者使用npm
npm instal pinia

4.2 创建Pinia

创建一个pinia实例（根store）并将其传递给应用，代码如下：

import { createApp } from 'vue'
import { createPinia } fom 'pinia'
import App from './App.ue'

// 创建pinia实例
const pinia = createPinia();
// 创建vue实例
const app = createApp(App);

app.use(pinia)
app.mount('#app')

4.3 使用Pinia

使用组合式API定义store，这是与Vue3的语法一致的。

组件式API中与Vuex中对应如下：

ref()就是state属性
computed()就是getters
function() 就是actions

代码如下：

export const useCounterStore = defineStore('count', () => {
    // 声明state数据 count
    const count = ref(0)
    // 声明操作数据方法（即actions）
    function increment(){
        count.value++
    }
    // 声明基于数据派生的计算属性（即getters）
    const double = computed(() => count.value * 2)
    // 对外暴露属性和方法
    return { count, increment, double  }
})

4.4 actions异步操作

异步actions函数的写法和组件中获取异步数据的写法是一致的。这里我们在store中获取菜单数据，示例代码如下：

export const useChannelStore = defineStore('channel', () => {
    // 声明数据
    const channelList = ref([])
    // 声明操作数据方法
    const getChannels = async () => {
        // 异步请求
        const { data: { data } } = await axios.get('请求地直')
        // 将异步结果赋值给channelList
        channelList.value = data
    }

    return { channelList, getChannels }
})

4.5 storeToRefs()

为了从store中提取属性时保持其响应性，需要使用storeToRefs()。它将为每一个响应式属性创建引用，这样要以直接从store中解构属性。这里以上面useChannelStore为例，代码如下：

import { storeToRefs } from 'pinia'
import { useChannelStore } from './store/chanel'

const store = useChannelStore();
// 解析出channelList并保持其响应性
const { channelList } = storeToRefs(store)

五、Pinia持久化

5.1 安装插件

npm i pinia-plugin-persistedstate

5.2 main中引用

在main.js中引入pinia-plugin-persistedstate插件，并绑定到pinia实例对象上。代码如下：

import persist from 'pinia-plugin-persistedstate'
// ...
app.use(createPinia().use(persist))

5.3 store仓库中开启

在defineStore第三个参数位置，添加persist: true即可。代码如下：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
}, {
	persist: true
})

更多pinia的使用方法，可去官方网站查看，地址：快速开始 | pinia-plugin-persistedstate

六、pnpm

pnpm包管理器，比同类工具快，节省磁盘空间。

6.1 安装

npm  install -g pnpm

6.2 创建项目

pnpm create vue

pnpm与yarn比较像，npm的安装和卸载指令为install、uninstall；pnpm与yarn的安装和卸载指令为add、remove。代码如下：

// npm
npm install axios -D
npm uninstall axios
npm run dev

// yarn
yarn add axios -D
yarn remove axios
yarn dev

// pnpm
pnpm add axios -D
pnpm remove axios
pnpm dev

七、预处理器Sass

7.1 安装

这里通过pnpm进行安装sass，命令如下：

pnpm add sass -D

7.2 创建sass文件

在style中编写sass样式，代码如下：

<template>
  <div class="container">
    <ul class="list">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.container {
  ul.list {
    list-style: none;
    li {
      font-size: 12px;
    }
  }
}
</style>

在页面中，可以在style中通过sass编写样式，也可以通过文件引入方式。

第一步：创建scss文件，代码如下：

.container{
    ul.list{ list-style: none;
        li{ font-size: 12px; }
    }
}

第二步：页面引入，代码如下：

<template>
  <div class="container">
    <ul class="list">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>

八、Element Plus

8.1 安装

pnpm add element-plus

8.2 引入Element Plus

引入不必自己去实现，在官网中引入代码复制过来使用即可。其官方文档地址：https://element-plus.org/zh-CN/

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

8.3 按需导入

在过去Vue2创建组件时，遇要通过引入组件文件，在components中定义后才可以使用，或者定义为全局组件直接使用。在Vue3中，可以使用额外的插件来导入要使用的组件。

1）安装命令：

npm install -D unplugin-vue-components unplugin-auto-import

2）然后在vite.config.ts中配置，代码如下：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3）此时，在components目录中创建的组件，则可以直接使用其命名且不需要引入直接使用。

HeaderCompot.vue代码如下：

<template>
  <div>这是header文件</div>
</template>

如上图，我们在页面任意位置通过命名调用，将驼峰模式通过 - 连接即可，代码如下图：

<template>
  <div class="container">
    <header-compt></header-compt>
    <ul class="list">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>

页面效果如下图：