【VUE3】新版Vue3+ElementPlus全家桶开发视频项目实战

发布于:2024-11-28 ⋅ 阅读:(31) ⋅ 点赞:(0)

VUE 介绍

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。

Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。

Model:数据。
View:视图。
ViewModel:连接View与Model的纽带。
  Vue.js的安装使用方式有几种,简单的只需要引入一个第三方的JS包即可。在中引入Vue.js包。

本地搭建 Vue 单页应用,可使用npm安装方式,即本文主要内容。

常用命令汇总

  • npm 常用命令
npm create vue@latest //创建项目
npm run build //编译
npm run dev //运行
npm install 模块 //本地安装(是将模块下载到当前命令行所在目录)
npm install -g 模块 //模块将被下载安装到“全局目录”中
npm config list //查看基本配置
npm config list -l //查看所有配置
npm config get prefix //查看全局安装默认目录
npm config get cache //查看全局安装缓存路径
npm config set prefix "目录" //设置全局安装默认目录 
npm config set cache "目录" //设置全局安装缓存目录 
npm cache clearn -force //清空缓存
npm config set registry //设置npm镜像源
npm config set registry https://registry.npm.taobao.org 
npm config get registry //查看npm镜像设置
  • pnpm 常用命令
    pnpm 是一种新型的包管理工具,旨在解决传统包管理工具如 npm 和 yarn 的一些问题。其主要特点和优势包括:

    • 依赖重复安装问题‌:pnpm 通过存储差异文件来避免重复安装依赖,从而节省硬盘空间并加快安装速度‌。
    • 安装速度‌:pnpm 的安装速度比 npm 和 yarn 快很多,尤其是在处理大型项目时更为明显‌。
    • 硬盘空间‌:由于只存储变化了的文件,pnpm 可以显著减少硬盘使用量‌。
npm install -g pnpm //安装pnpm 
pnpm config get registry //查看当前镜像源
pnpm config set registry https://registry.npmmirror.com //设置当前镜像源为淘宝
pnpm config set registry https://registry.npmjs.org //设置当前镜像源默认的npm源
pnpm install //安装项目依赖项(简写:pnpm i)
pnpm add  //将包添加到项目的dependencies中
pnpm add <package-name> -D //将包添加到项目的devDependencies中
pnpm remove <package-name> //移除依赖
pnpm remove <package-name> --global //移除全局安装的包
pnpm up //更新所有依赖项
pnpm upgrade <package-name> //更新特定包
pnpm upgrade <package-name> --global //更新全局安装的包
pnpm config set //
  • Vite 常用命令
    新型前端构建工具,能够显著提升前端开发体验,它主要由两部分组成:
    • 一个开发服务器,它利用 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
    • 一套构建指令,它使用 Rollup 打包你的代码,预配置输出高度优化的静态资源用于生产。
pnpm create vite //创建项目
pnpm create vite@latest my-vue-app -- --template vue //创建项目指定项目名称和你想要使用的模板
pnpm install -D vite //安装 vite 命令行工具
pnpm vite //运行

VUE3常见语法汇总

ref()  //const count = ref(0)  //count.value(访问值,包括对象要加.value) //任何类型的值,包括深层嵌套的对象或则JS内置数据结构 
await nextTick() //要等待 DOM 更新完成后再执行额外的代码,可以使用 nextTick() 全局 API
reactive() //只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)它不能持有如 string、number 或 boolean 这样的原始类型
模板语法1:<span>Message: {
   {
    msg }}</span>
模板语法2(插入HTML):<span v-html="rawHtml"></span> 
指令:<div v-bind:id="xd"></div> //常见指令 :id、:disable、:href
计算属性:(1)、import {
    ref, computed } from "vue";  (2)、const booksLength = computed(() => {
     return list.value.books.length > 0 ? "Yes" : "No"; }); (3)、 <span>{
   {
    booksLength }}</span> // 不是以一个函数执行,不加()

条件渲染:v-if、v-else、v-else-if、v-show
列表渲染:(1)、v-for(<li v-for="item in courseList">{
   {
    item }}</li>) ;(2)、of(<li v-for="item of courseList">{
   {
    item }}</li>#v-if和v-for是不推荐一起使用在同一个标签
事件监听:v-on:click="handler"  或则 @click="handler"
侦听器:watch(我们需要在状态变化时执行一些“副作用:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态)
侦听器:watchEffect()
onMounted:是一个生命周期钩子(生命周期函数),用于在组件实例被挂载到 DOM 上后执行代码。
onUnMounted://组件卸载之后


第二章 搭建Vue3的开发环境+初始Vue3

第1集 详解搭建Vue3的开发环境和注意事项
  • Node环境安装
    安装npm 需要安装note.js(NPM是包含在Node.js里的包管理工具),它具有以下功能:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户把自己编写的包或插件上传到NPM服务器供别人下载使用。来自各地的开源软件开发者可以使用 npm 互相分享和借鉴。包的结构使软件开发者能够轻松跟踪项目依赖项和版本。

(1)、检查node+npm版本

node -v //检查node版本
npm -v //检查npm版本

(2)、配置npm下载时的默认安装目录和缓存日志目录

​这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为npm install express [-g] 执行全局安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径目录下,久而久之C盘很容易被占满(C盘足够大可以无视此步骤),通过设置,将默认安装目录和缓存日志目录重新配置到其他盘符节约C盘空间

   此处举例选择放在:D:\Program\nodejs 目录下的node_global目录里(也可提前在文件资源管理器中建立好相应的文件夹)

输入以下命令配置npm的全局模块的存放路径和cache的路径:

(路径按实际情况更改为自己的路径)

npm config set prefix "D:\Program\nodejs\node_global" 
npm config set cache "D:\Program\nodejs\node_cache"

查看一下npm的安装路径

#查看npm全局安装保存路径
npm config get prefix  

#查看npm安装缓存cache路径
npm config get cache 

(3)、配置环境变量
步骤1:进入系统属性页面,系统----》系统信息----》高级系统设置----》高级----》环境变量-----》
步骤2:添加系统变量Path中的值,
【系统变量】下的

【Path】添加上node的安装目录路径【例如:D:\Program\nodejs】

D:\Program\nodejs

【Path】添加上刚才配置的npm下载时的默认安装目录和缓存日志目录

D:\Program\nodejs\node_global
D:\Program\nodejs\node_global\node_modules
第2集 创建第一个Vue3的应用
  • 创建第一个Vue3的应用
    • 通过CDN使用Vue
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  • 静态
<div id="app">{
   {
    message }}</div>

<script type="module">
  import {
    createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
   
    setup() {
   
      const message = ref('Hello Vue!')
      return {
   
        message
      }
    }
  }).mount('#app')
</script>

// 接收一个“容器”参数:<div id="app">{
   { message }}</div>,是一个 CSS 选择器字符串
// .mount() 方法应该始终在整个应用配置和资源注册完成后被调用
  • 响应式跟新
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{
   {
    count }}</span>
        <button @click="add"></button>

    </div>
    
<script type="module">
  import {
   createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
   
    setup() {
   
      const count = ref(0) 
      const add = () => count.value++; //此处要用 count.value
      return {
   
        count,
        add
      }
    }
  }).mount('#app')
</script>
</body>
</html>
  • 通过 npm 或者 pnpm 创建项目
    说明:“左<- 右->” 键 选择 是/否
pnpm create vue@latest

在这里插入图片描述

  • 通过Vite或者官方的命令行创建Vue3项目
pnpm create vite //创建项目
pnpm create vite@latest my-vue-app -- --template vue //创建项目指定项目名称和你想要使用的模板
pnpm install -D vite //安装 vite 命令行工具
pnpm vite //运行
  • 计算属性
    为什么后面不加(),不是以一个函数执行
    使用缓存,减少性能消耗
<script setup>
import {
    ref, computed } from "vue";
const list = ref({
   
  books: [
    "语文",
    "数学",
    "英语",
  ],
});

// 一个计算属性 ref
const booksLength = computed(() => {
   
  return list.value.books.length > 0 ? "Yes" : "No";
});
</script>

<template>
  <p>拥有书籍的个数:</p>
  <span>{
   {
    booksLength }}</span>
</template>
  • 可写计算属性
<script setup>
import {
    ref, computed } from "vue";
const firstName = ref("老");
const lastName = ref("王");

const fullName = computed({
   
  // getter
  get() {
   
    return firstName.value + " " + lastName.value;
  },
  // setter
  set(newValue) {
   
    // 注意:我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(" ");
  },
});
// fullName.value = "范 冰冰";
</script>

<template>
  <p>Has published books:</

网站公告

今日签到

点亮在社区的每一天
去签到