Vue3前端框架(初步)

已于 2024-02-20 09:36:28 修改
阅读量935 收藏 15
点赞数 15
分类专栏： Vue3 文章标签： 前端框架
于 2024-02-20 09:34:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55096795/article/details/130893850
版权

前期准备

node安装

node.js下载地址
选择D盘一直next就行
在这里插入图片描述

环境配置

打开安装目录
新建两个文件夹【node_global】和【node_cache】
管理员权限CMD

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

在这里插入图片描述

系统环境变量新建
变量名：NODE_PATH
变量值：D:\Node\node\node_global\node_modules
在这里插入图片描述

系统环境变量Path新建
D:\Node\node
在这里插入图片描述

用户环境变量Path新建
D:\Node\node\node_global
D:\Node\node\node_cache
在这里插入图片描述

配置镜像

腾讯源
npm config set registry http://mirrors.cloud.tencent.com/npm/
淘宝源已弃用(使用的话会报错无法安装)
npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述

安装cnpm

npm install -g cnpm --registry=http://mirrors.cloud.tencent.com/npm/
验证是否安装成功
cnpm config get registry
!](https://img-blog.csdnimg.cn/direct/885210c7aca64da593b1648c1c30e356.png)

安装 vue 和脚手架

安装 vue.js

cnpm install vue -g
在这里插入图片描述
验证安装是否成功
在这里插入图片描述

安装 webpack 模块

cnpm install webpack -g
在这里插入图片描述

安装 webpack-cli

cnpm install --global webpack-cli
在这里插入图片描述

安装vue-cli 3.x

cnpm install @vue/cli –g
在这里插入图片描述
安装完后的目录
在这里插入图片描述

常用命令

在这里插入图片描述

创建 vue 3 项目

项目文件

管理员CMD到指定的目录

vue create vue-demo

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Element

下载的别人的项目不用下载–node_modules–，下载package.json后npm install

// 安装
// -S 把安装的文件记录到package.json中
npm i element-ui -S
// 引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

<template>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="openId" label="用户open_id" width="180">
        </el-table-column>
        <el-table-column prop="available" label="状态" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="totalStory" label="总数" width="180">
        </el-table-column>
        <el-table-column prop="collectionStory" label="收藏数" width="180">
        </el-table-column>
    </el-table>
</template>
  
<script>
export default {
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'warning-row';
            } else if (rowIndex % 2 === 0) {
                return 'success-row';
            }
            return '';
        }
    },
    data() {
        return {
            tableData: []
        }
    },
    created: function () {
        this.$http.post("/user/user_query").then((response) => {
            console.log(response);
            this.tableData = response.data.data;
        })
    }
}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

Axios

// 安装
npm install axios

// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 将axios作为全局的自定义属性，每个组件可以在内部直接访问
// Vue3
// app.config.globalProperties.$http = axios
// Vue2
Vue.prototype.$http = axios;

// 请求	上面的模板
created: function () {
    this.$http.post("/user/user_query").then((response) => {
        console.log(response);
        this.tableData = response.data.data;
    })
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

VueRouter

// 安装
// 4.x结合vue3使用
// 3.x结合vue2使用
npm install vue-router@3

// index.js路由跳转
import VueRouter from "vue-router"
import Vue from "vue"
import Discover from "@/components/Discover.vue"
import Friends from "@/components/Friends.vue"
import My from "@/components/My.vue"
import Toplist from "@/components/Toplist.vue"
import Playlist from "@/components/Playlist.vue"
import Product from "@/components/Product.vue"

// 将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件之间的对应关系
    routes: [
        { path: "/", redirect: "/discover"},
        { path: '/discover', component: Discover, children: [
            { path: "toplist", component: Toplist },
            { path: "playlist", component: Playlist }
        ]},
        { path: '/friends', component: Friends },
        { path: '/my', component: My, children: [
            { path: ":id", component: Product, props: true }
        ]}
    ]
})

export default router

// main.js
import router from './router'
new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

// 模板(其他组件代码放后面)
<template>
  <!-- 不能有两个根组件 -->
  <div id="app">
    <User></User>
    <h1>APP组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/friends">发现朋友</router-link>
    <router-link to="/my">我的</router-link>
    <!-- 声明路由占位标签 -->
    <router-view></router-view>
  </div>
</template>

<script>
import User from "@/components/User.vue"
export default {
  name: 'App',
  components: {
    User
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vuex

// 记得看自己的vue版本，那个视频我看了五次才发现版本不对，gpt问烂了
npm install vuex@3 --save
// 报错强制安装
npm install vuex@3 --save --force

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },mutations: {
        increment (state) {
            state.count++
        }
    }
})

export default store

导入store

import store from './store'
new Vue({
  render: h => h(App),
  router: router,
  store: store
}).$mount('#app')

例子

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, text: '吃罚单', done: true },
            { id: 1, text: '睡觉觉', done: false }
        ]
    }, mutations: {
        increment (state, n) {
            state.count += n;
        }
    }, getters: {
        doneTodos: state => {
            return state.todos.filter( todo => todo.done );
        }
    }
})

export default store

// CountAdd.vue
<template>
    <div id="app">
        <h3 @click="increment(1)">{{ this.$store.state.count }}</h3>
        <h3 @click="add(1)">{{ count }}</h3>
        <ul>
            <li v-for="todo in doneTodos" key="todo.id">
                {{ todo.text }}
            </li>
        </ul>
    </div>
</template>

<script>
import store from '@/store';
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
    computed: {
        ...mapState([
            // 映射this.count为store.state.count
            'count','todos'

            // // 箭头函数使代码更简练
            // count: state => state.count,

            // // 传字符串参数'count'等同于'state => state.count'
            // countAlias: 'count',

            // // 为了能够使用'this'获取局部状态，必须使用常规函数
            // countPlusLocalState (state) {
            //     return state.count + this.localCount
            // }

        ]),
        ...mapGetters([
            'doneTodos'
        ])
    },
    methods: {
        ...mapMutations([
            'increment'
        ]),
        ...mapMutations({
            add: 'increment'
        }),
        // add() {
        //     // 使用store/index.js中的mutations中的increment函数
        //     store.commit('increment', 1)
        // }
    }
}
</script>

在这里插入图片描述
模块化
在这里插入图片描述
在这里插入图片描述

运行

npm run serve

package.json

{
  "name": "vue-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.13",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

示例代码

在需要请求的控制器前面加上@CrossOrigin注解，处理Cors跨域问题
main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import router from '@/router'
import store from '@/store'

Vue.config.productionTip = false
Vue.use(ElementUI)
// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 将axios作为全局的自定义属性，每个组件可以在内部直接访问
// Vue3
// app.config.globalProperties.$http = axios
// Vue2
Vue.prototype.$http = axios;

new Vue({
  render: h => h(App),
  router: router,
  store: store
}).$mount('#app')

App.vue

<template>
  <!-- 不能有两个根组件 -->
  <div id="app">
    <User></User>
    <h1>APP组件</h1>
    <!-- 声明路由链接 -->
    <router-link to="/discover">发现音乐</router-link>
    <router-link to="/friends">发现朋友</router-link>
    <router-link to="/my">我的</router-link>
    <!-- 声明路由占位标签 -->
    <router-view></router-view>
  </div>
</template>

<script>
import User from "@/components/User.vue"
export default {
  name: 'App',
  components: {
    User
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

router路由跳转

import VueRouter from "vue-router"
import Vue from "vue"
import Discover from "@/components/Discover.vue"
import Friends from "@/components/Friends.vue"
import My from "@/components/My.vue"
import Toplist from "@/components/Toplist.vue"
import Playlist from "@/components/Playlist.vue"
import Product from "@/components/Product.vue"
import CountAdd from "@/components/CountAdd.vue"

// 将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    // 指定hash属性与组件之间的对应关系
    routes: [
        { path: "/", redirect: "/discover"},
        { path: '/discover', component: Discover, children: [
            { path: "toplist", component: Toplist },
            { path: "playlist", component: Playlist }
        ]},
        { path: '/friends', component: Friends,  children: [
            { path: "countadd", component: CountAdd }
        ]},
        { path: '/my', component: My, children: [
            { path: ":id", component: Product, props: true }
        ]}
    ]
})

export default router

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, text: '吃罚单', done: true },
            { id: 1, text: '睡觉觉', done: false }
        ]
    }, mutations: {
        increment (state, n) {
            state.count += n;
        }
    }, getters: {
        doneTodos: state => {
            return state.todos.filter( todo => todo.done );
        }
    }
})

export default store

User.vue（纯表格）

<template>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="openId" label="用户open_id" width="180">
        </el-table-column>
        <el-table-column prop="available" label="状态" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="totalStory" label="总数" width="180">
        </el-table-column>
        <el-table-column prop="collectionStory" label="收藏数" width="180">
        </el-table-column>
    </el-table>
</template>
  
<style>
.el-table .warning-row {
    background: oldlace;
}
.el-table .success-row {
    background: #f0f9eb;
}
</style>
  
<script>
export default {
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'warning-row';
            } else if (rowIndex % 2 === 0) {
                return 'success-row';
            }
            return '';
        }
    },
    data() {
        return {
            tableData: []
        }
    },
    created: function() {
        this.$http.get("/user/user").then((response) => {
        	// 根据自己的数据改变
            this.tableData = response.data.data;
        })
    }
}
</script>

Discover.vue（多层路由）

// 组件（toplist和playlist是两个展示的组件，里面就一个h1标签）
<template>
  <div>
    <h1>发现音乐</h1>
    <!-- 子路由链接 -->
    <router-link to="/discover/toplist">推荐</router-link>
    <router-link to="/discover/playlist">歌单</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

My.vue和Product.vue（id路由，父向子组件props传值，{{id}}获取）

// My.vue
<template>
    <div>
        <h1>我的</h1>
        <router-link to="/my/1">商品1</router-link>
        <router-link to="/my/2">商品2</router-link>
        <router-link to="/my/3">商品3</router-link>
        <router-view></router-view>
    </div>
</template>
// Product.vue
<template>
    <div>
        <!-- 获取动态的id值 -->
        <h3>商品{{ id }}</h3>
    </div>
</template>

<script>
export default {
    props: ["id"],
    // 组件的名称
    name: "Product"
}
</script>
// router/index.js
{ path: '/my', component: My, children: [
   { path: ":id", component: Product, props: true }
]}

CountAdd.vue

<template>
    <div id="app">
        <h3 @click="increment(1)">{{ this.$store.state.count }}</h3>
        <h3 @click="add(1)">{{ count }}</h3>
        <ul>
            <li v-for="todo in doneTodos" key="todo.id">
                {{ todo.text }}
            </li>
        </ul>
    </div>
</template>

<script>
import store from '@/store';
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
    computed: {
        ...mapState([
            // 映射this.count为store.state.count
            'count','todos'

            // // 箭头函数使代码更简练
            // count: state => state.count,

            // // 传字符串参数'count'等同于'state => state.count'
            // countAlias: 'count',

            // // 为了能够使用'this'获取局部状态，必须使用常规函数
            // countPlusLocalState (state) {
            //     return state.count + this.localCount
            // }

        ]),
        ...mapGetters([
            'doneTodos'
        ])
    },
    methods: {
        ...mapMutations([
            'increment'
        ]),
        ...mapMutations({
            add: 'increment'
        }),
        // add() {
        //     // 使用store/index.js中的mutations中的increment函数
        //     store.commit('increment', 1)
        // }
    }
}
</script>

结果图
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

注意事项

在需要请求的控制器前面加上@CrossOrigin注解，处理Corss跨域问题

vue-element-admin后台集成

V18.16.0会报错，降到16版本下载地址
在这里插入图片描述

项目下载地址

// 项目克隆链接
git clone https://github.com/PanJiaChen/vue-element-admin.git

// 配置（删掉以下信息）
1.package.json中的"tui-editor": "1.3.3"
2.src/router/modoules/components.js中21行
    {
      path: 'markdown',
      component: () => import('@/views/components-demo/markdown'),
      name: 'MarkdownDemo',
      meta: { title: 'Markdown' }
    },
3.src\components\MarkdownEditor
4.src\views\components-demo\markdown.vue

// 安装命令
npm install --registry=https://registry.npm.taobao.org
// 启动命令

在这里插入图片描述

编程有点甜
关注
  • 15
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.NetCore：.NetCore + Vue，前阶段分离，支持前一段业务代码扩展的快速开发框架，Vol.Vue为前端项目，Vue.Net后台项目
02-05
Vue + .NetCore前初步分离，支持对前端，后台基础业务代码扩展的快速发开框架 框架核心 快速开发（基础功能全部由代码生成器生成） 支持前端，后台自定义业务代码扩展，后台提供常规通用扩展与通用类 前端，后台提供了近300个扩展方法与属性，开发人员可在此功能上编写扩展自定义业务代码 代码生成（代码生成器可直接生成主/从表前预期业务代码，有30种属性可在线配置生成的代码） 前端表格自动转换键/值 前端表单select / checkbox自动绑定数据源，不需要写任何代码 支持（主从表）一对一前代码自动生成，并支持数据源自动绑定与业务代码扩展，不需要写任何代码 支持一对多从表自定义扩展（不限
前端 threejs 3D饼图 通过一些配置可以实现3D饼图的生成
06-19
通过threejs实现的3D饼图图表，数据可视化的高度应用场景中2D图表居多，3D相关的数据可视化比较少，不知收费贵而且资源少之又少，在项目中需要使用时对于初步接触的开发的人员很不友好，希望大家通过本案例可以快速进行通过threejs进行开发3D图表。 演示视频：https://www.bilibili.com/video/BV14v4y1g7Bv?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=f9e6aeeec6355c2e7f3f2e3eaf4ae21c
【前端开发---Vue3】前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！
m0_67844671的博客
09-28 9645
前段开发之详细的Vue3入门教程，特别适合小白系统学习，入门到熟练使用Vue看这一篇就够了！内容包括Vue3项目的创建，Vue2与Vue3的区别，路由，组件，各种组件之间的传值等；
Vue3详细讲解
热门推荐
一个前端开发者
12-31 2万+
为什么要学vue3: 1. Vue是国内最火的前端框架, 2.Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本！ 3. Vue3性能更高，体积更小,4. Vue3.0在经过一年的迭代后，越来越好用. 动机与目的: 1. 更好的逻辑复用 与 代码组织 (composition组合式api) optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护! 2.更好的类型推导 (typescript支持)
前端框架Vue3
tainqiuer123的博客
04-09 2223
1、vue介绍 2、vue基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue3.js"></script> </head> <body> <div id="app"> <!-.
前端魔法进阶：Vue 3源码解析与新特性对比！
qq_29510269的博客
07-28 247
在本篇博客中，我将带你踏上一段探索Vue 3源码之旅，解析这个前端魔法的奥秘，让你深入了解Vue 3的核心原理！同时，我们还将探讨Vue 3与ES6、ES2023等新特性之间的对比，看看它们如何共同构建了前端魔法的世界！
【前端框架】Vue3合集
最新发布
wmh的博客
01-16 1322
Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品。
Vue3对于一个前端来讲意味着什么？
xuxian的博客
06-15 1911
最近很多技术网站，讨论的最多的无非就是Vue3了，大多数都是Composition API和基于Proxy的原理分析。但是今天想着跟大家聊聊，Vue3对于一个低代码平台的前端更深层次意味着什么？
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 4715
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
【前端知识之Vue3】一文搞懂Vue3到底做了哪些优化
weixin_44337386的博客
08-09 4059
本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue3相对于Vue2做了哪些优化。
前端Vue.js技术，利用axios，elementUI等热门框架知识
07-23
前端Vue.js技术，利用axios，elementUI，mintUI等热门框架知识。适合小白初学ElementUI等框架。有利于小白走进大前端的时代领域。见识不一样的前端高级领域。适合小白初学小程序的设计的认识。让你见识高端小程序...
基于 Ant Design of Vue 实现的 Ant Design Pro Vue 版 nbcio-boot 的前端UI框架
11-17
NBCIO 亿事达企业管理平台，基于 Ant Design of Vue 实现的 Ant Design Pro Vue 版 nbcio-boot 的前端UI框架，采用前后端分离方案，提供强大代码生成器的低代码平台。 前端页面代码和后端功能代码一键生成，不需要写...
vue+element后台管理系统模块
04-21
适合学习过一段时间vue的人群，对elementui有着一个初步的了解，开始写一些实战项目的
【前端】搭建Vue3框架
山赶着山，山山漫漫结成关
08-05 8962
搭建Vue3框架
前端常用 Vue3 项目组件大全
Itmastergo的博客
08-28 1864
Vue.js 是一种流行的 JavaScript 前端框架，它简化了构建交互式的用户界面的过程。Vue3 是 Vue.js 的最新版本，引入了许多新的特性和改进。
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）一：项目规划及初始化
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
06-17 5433
使用vue3+Layui实现通用管理系统前端，使用vue3+layui搭建系统UI界面，使用nodejs搭建模拟web服务器，使用echarts实现系统可视化模块，可以此项目为基础进行扩展开发，快速搭建管理系统。
Vue3 详细教程
qq15035899256的博客
05-23 8692
本文是对Vue的学习，学习了Vue的选项式API和组合式API，组件之间的交互，引入swiper第三方插件，网络请求封装，还有Router路由，Vuex状态管理，加载Element-plus组件。之后的学习内容将持续更新！！！
前端 Vue3
m0_60920589的博客
02-01 89
Vue3 (一) Vue3的新特性
前端使用Vue,后端使用springboot+redis实现商户小程序
04-12
基于Vue框架和SpringBoot框架，商户小程序可以实现很多功能，例如商品展示、购物车、订单管理等等。Redis数据库可以帮助你处理缓存和分布式锁等问题，从而提高系统的性能和可伸缩性。 不过，这只是初步的回答，如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值