Vue2.0项目重构到Vue3.0

六代目带土

已于 2023-02-20 08:15:50 修改

阅读量1.9k

点赞数 7

分类专栏： Vue 文章标签：重构前端 javascript

于 2023-02-17 16:04:36 首次发布

本文链接：https://blog.csdn.net/h5jqd/article/details/129066066

版权

本文介绍了将Vue2.0项目重构至Vue3.0的步骤，包括使用npm或vite创建新项目，运行与打包，以及在main.js中引入插件。重构是一个在不改变代码行为下改进其内部结构的过程，旨在提升程序设计质量。

摘要由CSDN通过智能技术生成

1.新建Vue3.0项目，确定使用的脚手架

第一种：在终端输入：npm init vue@latest

注：选择项目功能时：除了第一项的项目名字外，其他可以暂时No

cd <your-project-name>

                            npm install

                             npm run dev ：运行

                             npm run build: 打包 (生成一个dist文件夹)

        第二种：在终端输入：npm init vite-app <project-name>

cd <your-project-name>

                                            npm install

                                            npm run dev

3.所用到的插件具体引用：

npm i axios echarts element-plus font-awesome node-sass@6 sass-loader@10 qs echarts -s

4.我们在main.js中需要引入的插件有：

vue2.0代码块如下：

<template>
  <div class="studentList">
    <!-- 查询 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <!-- 1 : 0-9 2:10-19 3:20-29 slice((当前页数-1) * 每页的条数)，当前页数*当前的条数 -->
    <el-table :data="compData" border style="width: 100%">
      <el-table-column prop="name" label