20235/5 学习总结{vue 入门}

我爱君君吖～

已于 2023-05-06 14:36:23 修改

阅读量57

点赞数

分类专栏： vue 文章标签：学习

于 2023-05-05 23:08:31 首次发布

本文链接：https://blog.csdn.net/qq_62649563/article/details/130515786

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

"睡前原谅一切，醒来便是新生"

1.前言吧

今天主要是为了完成作业而学习，就是如下的作业。然后我看了B站的多位老师的视频课，发现学vue的起步是疯狂的下载然后是配置，最后是学习相关的语法功能。首先需要下载 Nodejs,然后配置。大致流程如下。

1.创建项目

下载安装配置好Node.js后，咱们新建一个文件夹，假设它的名字叫code,然后cmd回车进去，

欧克，然后创建项目：在这个终端输入哈

pnpm create vite@latest demo

如果你下载的是npm的话，那就替换掉pnpm，一样的，问题不大。

demo指的是你项目的名字，也可以换成自己喜欢的，都行

用键盘的上下键跳到Vue这里，然后回车确定

回车第一个

出现这一个页面后就可以关掉它了，第一个是进入这个文件的命令，第二个是安装相应的文件的命令，第三个是运行窗口的命令。关掉。

然后打开我们的Vscode,如果s是用IDEA的同学，其实差不多，大家可以去参考其他博主写的内容。

找到它，就是你刚开始新建的那个文件，然后就是现在这个样子。

咱们的App.vue是在src目录下的，然后我们缺少node_modules这个包，正常的话应该是这样子的，下图。

那我们要有它的话，需要找到终端，就在这个的最上面，输入pnpm install 就行，也可以是npm install

就是这个样子。

然后出现这个就可以了，完美。如果此时此刻你跟着我到这里了,那简直是泰裤辣！接下来就没有什么能够难到你啦。

到这里我们的第一个Vite项目就已经完成了，除了运行，用pnpm dev 运行吧，在终端哦

然后我们这里就出现了一个链接，点它或者复制，就是下面这个样子。

到这里已经很不错啦，接下来我们要学习的就是Vue的语法，咱先把相应的语法学会然后再学框架，咱们可以一起哦，欢迎关注我！

嗷，对了，如果你想一运行相应的网站就跳出来的话，需要在vite.config.ts文件下面进行配置，像下面这样。

2.Element-Plus的学习

官网在这儿:一个 Vue 3 UI 框架 | Element Plus (gitee.io)大家可以参考官网进行学习

首先我们需要下载，这里的话我用的是pnpm，如果是用nom的宝宝的话可以直接换一下，就是直接把pnpm换成npm,命令如下：

pnpm install element-plus

然后就根据官网来进行配置，有两种方式：完整引入和按需导入，不过我们一般用的是按需导入，为什么，老师这么说的，咱先别纠结。首先需要自动导入，命令行如下，直接复制就行，我好吧，嘿嘿。

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

新建终端，我用的是vscode.

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

我的是这个样子

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
  server:{
      open:true //自动打开浏览器
  }
})

然后这样就可以了，我们再在App.vue文件中操作就行。点击组件，疯狂去复制啦，好处就在这，可以不用花那么多的时间就可以得到一个很好看的样式，

然后就是里面有一个图标icon的应用，下载+配置，这里就不多说了，大家自己去看文档

3.路由的安装

首先说一下路由的作用，他可以让你实现网页的切换（可以这样理解，但是不太准确），咱们开始pnpm dev运行以后，最先蹦出来的是App.vue的页面，后面再切换的也还是在这个页面里面。

参考官网进行学习：

https://router.vuejs.org/zh/introduction.htm l

安装命令：

pnpm install vue-router@4

新建一个文件按下面的来

路由配置在index.ts下面配置，不要弄错了哦。

import{createRouter,createWebHistory}from 'vue-router'
const router=createRouter({
    history:createWebHistory(),
    routes:[
        {name:"home",path:"/",component:()=>import("../views/HomePage.vue")},
        {name:"test",path:"/test",component:()=>import("../views/TestPage.vue")}
    ]
})
export default router

好的，这样配置好了以后，再在App.vue下面加个这个代码，框框中的就行，下面的别管。

其他的两个文件HomePage.vue和另一个是这样的，这样就行

4.实例1.0

下面的就是今天我的学习成果的一个汇总

序号可以自动增加，通过输入相应的内容以后点击添加即可显示出来。

代码如下:

<template>
  <router-view></router-view>
  <div class="body"> 
    <el-form>
      <el-form-item>
        <el-input v-model="name" placeholder="请输入待办事件">
              <template #append>
                <el-button type="success" @click="handleAdd">增加</el-button>
              </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-table :data="students" :row-key="row => row.id">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="待办事件"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handleDelete(scope.$index)"  type="danger" :icon="Delete"  >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      students: [
        { id: 1, name: '写作业' },
        { id: 2, name: '学习' },
        { id: 3, name: '游泳' },
      ],
    };
  },
  methods: {
    handleAdd() {
      //这里的0表示初始值
      const maxId = this.students.reduce((acc, cur) => Math.max(acc, cur.id), 0);
      //将这一组中的数据添加到students数组中
      this.students.push({
        id: maxId + 1,
        name: this.name,
      });
      this.name = '';
    },
    handleDelete(index) {
      this.students.splice(index, 1);
    },
  },
};
</script>
<style>
.body{
  width:600px;
  height: 600px;
  margin:100px auto;
}
</style>

一些小知识点如下；