前端框架选型搭建-vue-vuex-route-elementui+axios

最新推荐文章于 2025-04-21 21:49:11 发布
最新推荐文章于 2025-04-21 21:49:11 发布
阅读量1.9k 收藏 4
点赞数 2
分类专栏： vue学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_18837459/article/details/82153212
版权

简介

开发工具

VSCode, WebStorm 。。。

可以使用自己喜欢的任意开发工具或者文本编辑器

开发环境

Node.js, Npm, Cnpm, Webpack, ES6

框架

Vue.js, Element UI

基础概念

Node.js

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

npm

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

cnpm

CNPM是淘宝的NPM镜像，由于在国内网络环境访问NPM不便，所以用CNPM代替NPM

Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

ES6

CMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。

Vue.js

vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Element UI

由饿了吗开源，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

vue-cli脚手架

npm install --global vue-cli//安装vuecli脚手架

vue init webpack myproject//使用webpack构建

cd myproject//进入初始化的项目目录

npm install//安装项目package.json使用到到组件插件

npm run dev//运行项目  

npm run build//打包编译项目，打包成功后，生成dist目录
ps:需要先安装nodejs

开发工具vscode

  • 安装vscode
  • 安装Vurtur插件//vue在vscode上的工具
  • 配置vue代码片段 文件==》首选项==》用户代码片段//配置完代码片段后，只需要输入vuec，代码片段自动输入到.vue文件中
{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "Create vue template": {
        "prefix": "vuec",
        "body": [
            "<template>",
                        "  <div>",
                        "  </div>",
            "</template>",
            "<script>",
            "export default {",
            "  name: '${1:component_name}',",
                        "  directives: {},",
                        "  components: {},",
            "  data () {",
            "    return {}",
            "  },",
                        "  props: {},",
                        "  computed: {},",

                        "  watch: {},",
                        "  methods: {},",
                        "  beforeCreate () {},",
                        "  created () {},",
                        "  destroyed () {},",
                        "  mounted () {}",
            "}",
            "</script>",
            "<style lang='${2:postcss}'>",
            "</style>",
            ""
        ],
        "description": "Create vue template"
    }
}
  • 配置eslint，根目录 .eslintrc.js 到 rule下面配置
"quotes": [
  "off"
],
"semi": [
  "warn",
  "always"
],
"space-before-function-paren": [
  "error", 
  "never"
]

webpack

/build/webpack.base.conf.js

  • 增加别名，
'@utils': resolve('src/utils')//resolve.alias对象添加该属性

//新增完别名，import的时候就可以使用别名，快速定位路径
import test from "@utils/utils.js";//即进入 /src/utils/utils.js
  • 设置图片资源转base64规则
module.rules
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,// 图片大小限制 单位b
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}
优点：讲小图标等静态资源转成静态base64数据，减少网络请求次数，降低服务器压力

/config/index.js

  • 配置host ip autoOpenBrowser(是否自动打开浏览器)
//dev下 开发环境配置
host: '10.8.117.75', 
port: 8080, 
autoOpenBrowser: false,
  • 配置打包编译输出目录
//build下 
assetsRoot: path.resolve(__dirname, '../dist'),//构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory: 'static',//资源子目录 除了index.html，其余的js img css都分在这里
assetsPublicPath: '/',//以当前根目录（/）为项目目录

ES6转ES5

install babel-polyfill 
npm install --save babel-polyfill
修改webpack.base.conf.js 
  entry: {
    // app: './src/main.js'
    app: ['babel-polyfill', './src/main.js']
  },

vuex状态管理器

  • 引入
    在src下建立store目录，新增store.js
import Vue from 'vue';
import Vuex from 'vuex';
import test from '@/store/test';//  状态管理器可以设置子模块，通过在modules引入即可。
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {//  状态管理器的属性
    count: 0
  },
  actions: {//  调用一个或者多个mutations操作state，通过store.dispatch("")
    doChangeState(context, obj) { // 也可以使用{commit}
      console.log("context", context);
      console.log("obj", obj);
      context.commit("changeState", obj.count);
    }
  },
  mutations: {//  执行操作state的方法
    changeState(state, obj) { // 这边只有2个参数，调用commit("changeState",obj);只能传一个参数，可以为对象
      state.count = obj;
    }
  },
  getters: {
    //  在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。
    getProductByid: (state) => (id) => {// 多个箭头函数语法，底下有解释
      return state.productList.find(item => item.id === id);//  等同于find(item,index,obj){return item.id === id}
    }

  },
  modules: {
    test
  }
});

// getProductByid: (state) => (id) =>{

// }
// function getProductByid(state) {
//   return function(id) {
//   }
// }

// var getProductByid = getProductByid(state);
// getProductByid(id)
export default store;
根目录的main.js，添加vuex的引用 
import Vuex from 'vuex';
Vue.use(Vuex);
  • vuex状态管理器使用
import store from "@/store/store.js";
import { mapState } from "vuex";//  mapState、mapGetters、mapActions状态管理器的三种辅助函数


  computed: {
    oldTest: () => {
      console.log("oldTest");
      //  test的值变化，computed会再次执行，
      //  如果return 的是对象， 则不会再次执行
      return JSON.stringify(store.state.test);
    },
    ...mapState({
      test: state => {
        return state.test;
      }
    })
  },

route路由的使用

  • route引入
使用vue init 创建初始化项目的时候，可以直接创建。 如果没有创建，可以手动创建
  1. 在src下建立router目录，新增index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/:id',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});
  1. 在main.js引入router
import router from './router';// ./router(相对路径)  表示进入/src/router/index.js（index.js是缺省的）
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});
  1. 在根目录App.vue组件内加入标签
  <div id="app" v-cloak>
    <transition>
        <router-view/>
    </transition>
  </div>

transition为路由过度动画

  • 路由操作

引入后即可在任何组件内通过this. router操作路由，或者this. r o u t e r 操 作 路 由 ， 或 者 t h i s . route访问当前路由

  • 路由跳转
//路由跳转有两种形式
<router-link :to="..."> 

router.push(...)
  • 路由传参
    1. params

在route.js配置path，:加上需要传递的param，通过this.$router.push传递对应路径

{
  path: '/:id',
  name: 'HelloWorld',
  component: HelloWorld
}
this.$router.push({
  path: "/" + id
});

通过name匹配对应的路由，在params里面直接传入参数

this.$router.push({
  name: "HelloWorld",
  params: {
    id: id
  }
});
  1. query
this.$router.push({
  path: '/HelloWorld',
  query: {
    id: id
  }
})

这种情况下 query传递的参数会显示在url后面?id=？

  • 路由懒加载

通过路由同一管理页面当页面量大的时候，打包构建应用的时候JavaScript包会非常大影响加载。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

  1. 添加 syntax-dynamic-import 插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
  1. webpack.base.conf.js添加配置
chunkFilename: '[name].js',//webpack.base.conf.js output下新增chunkFilename属性
  1. 定义异步组件
<template>
  <div>
    这个是个异步组件，同一个chunkName的组件会被一起加载。
  </div>
</template>
<script>
const TestAsync = {
  name: "testAysn",
  directives: {},
  components: {},
  data() {
    return {};
  },
  props: {},
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  destroyed() {
    console.log("destroyed");
  },
  mounted() {
    console.log("异步组件mounted", this);
    console.log("route的param", this.$route.params);
  }
};
export default TestAsync;
</script>
<style lang='postcss'>
</style>
  1. 路由加载异步组件
const TestAsync = () => import(/* webpackChunkName: "TestAsync" */ '@/components/TestAsync');

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/TestAsync/:id', // 带有:
      name: 'TestAsync',
      component: TestAsync
    }
  ]
});
const TestAsync = () => import(/* webpackChunkName: "TestAsync" */ '@/components/TestAsync');

其中webpackChunkName为异步组件打包在名字，同样的webpackChunkName会被打包在一起，只加载一次

axios

npm install axios
  • promise
    参考下网上的文档，理解下promise的必要性
  1. 从浏览器中创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了

  • Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中。（在前后端分离的服务端渲染中，axios能在浏览器和node中执行，至关重要）

  • 开发环境配置proxyTable，临时允许跨域请求
    /config/index.js=>dev下，修改proxyTable属性

proxyTable: {
  '/test': {
    target: 'https://www.zhongxiangliquan.com/index.php/home/program/joinshop?openid=1&session_key=1', // 接口的域名
    secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
      '^/test': ''
    }
  }
},
import axios from "axios";

new Promise(resolve => {
  setTimeout(() => {
    resolve("timeout");
  }, 2000);
})
  .then((res) => {
    console.log(res);// timeout
    return axios.get(// axios.get返回的是一个promise对象
      "/test"
    );
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

elementui

npm i element-ui -S
  • 按需引入elementui组件
    借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 
npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    // 只需要在原有的.babelrc文件添加如下
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
  • 完整引入
    在main.js文件添加elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
  • 使用elementui

参考elementui官网文档，即可使用对应UI组件

<el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</el-row>

前后端分离

12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 9142
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
vue考试系统后台管理项目-登录、记住密码功能
热门推荐
总结前端开发中遇到的问题，分享前端知识
09-03 1万+
vue2.0后台系统管理项目：实现考试录入到评分、成绩查看导出一系列流程，人员分配权限，菜单路由配置，题库试题录入，管理考试分类
vue+vuex+vue-router+axios+elementui
12-24
基于vue2.x+vuex+vue-router+axios+elementui的一套后台开发系统模板
vue-vuex-vueRouter-axios-elementUi搭建的前端工程
m0_37755267的博客
08-12 341
采用vue2以及vue全家桶搭建的vue前端项目
vue+elementUI+vuex+axios+json-server 实战
isfor_hhj的博客
08-08 999
前言 使用vue+elementUI+vuex+axios+json-server实现的一个简单用户表格数据的增删改查。效果图如下： 准备 在上一节中已经介绍了vuex如何应用的，需要了解的请去这里。 这一章中，主要介绍实际使用vuex在项目开发中是如何运用的。 本章除了讲解vuex的实战应用外，还将项目中使用到的其他技术也相应的讲解一下。 elementUI 安装：yarn add elem...
Vue前端框架选型论证
秋枫落落的博客
05-30 1016
Vue前端框架选型论证 文章目录Vue前端框架选型论证1. 前端框架的演变1.1 前端框架的演变历史1.2 web 1.0 时代1.3 后端 MVC 时代1.4 前端 MVC 时代1.5 MVP 时代1.6 MVVM 时代2. 前端框架的演变总结3. 前端 MVVM 三大框架 AngularJS、Vue、React 对比选择3.1 三大框架社区活跃度对比3.2 市场应用情况对比3.3 前端 MVV...
vue+vue-router+axios+element-ui构建vue实战项目之一（基础知识篇）
weixin_34214500的博客
12-11 489
前言 刚开始学习vue，经过一段时间基础语法的学习，本人决定从零构建一个vue实战项目系列，力求以简明、清晰、准确的图文以及代码描述，配合github的项目开源代码，给各位vue新手提供一个入门文案。 好了，废话不多说，开始吧。 前后端分离开发模式 在若干年前，我们的WEB项目开发模式是如下的： 设计师设计页面设计稿 前端工程师切成html+css+js的页面 后端工...
前端框架-Vue.js语法
aming小老弟
10-11 568
父组件中的 handleUpdateChildValue 方法接收到参数后，将其设置为 childValue 变量的值，从而完成了子组件向父组件传递数据的过程。当我们需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。注意： vue组件中的全部html都存在于一个块元素中，就是app.vue中的 id名字为app的div。Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。对状态的派生和缓存。
JavaScript前端框架Vue.js实战：构建交互式单页面应用
数字魔方操控师的博客
04-21 1103
Vue.js 由尤雨溪于 2014 年创建并发布，自诞生以来，便凭借其独特的优势在 Web 开发社区中迅速崭露头角。它专注于构建用户界面，核心库体积小巧，却蕴含着强大的功能，能够快速加载，为用户带来极佳的体验。Vue.js 具有渐进式的特点，这意味着开发者可以依据项目的实际需求，灵活地逐步引入其功能。无论是简单的静态页面，还是复杂的单页应用程序，Vue.js 都能游刃有余地应对。创建好 Vue 项目后，其目录结构具有清晰的组织方式。
Python Django 前端框架整合
最新发布
Python编程之道的博客
04-21 677
在现代 Web 开发中，前后端分离的架构模式越来越流行。Python Django 作为一个强大的后端 Web 框架，提供了丰富的功能和工具，如数据库管理、用户认证、URL 路由等。而前端框架，如 React、Vue.js 等，能够为用户提供更加流畅、交互性强的界面。本文章的目的是探讨如何将 Django 与前端框架进行有效的整合，使开发者能够充分发挥两者的优势，构建出高质量的 Web 应用。
vue vue-router vuex element-ui axios 的学习笔记（七）完善登录注册
weixin_34319640的博客
11-20 172
现在我们已经能够在服务器环境下完成注册操作了 登录功能 login.vue <template> <el-main> <el-form :model="LoginForm" ref="LoginForm" :rules="rule" labe...
前端框架Vue----vuex集中式状态管理
weixin_45228198的博客
12-29 727
vuex集中式状态管理全局事件总线全局事件总线案例Vuex 全局事件总线 用于任意组件间的通信。 定义一个变量 让所有组件均可见===>放Vue原型（Vue.prototype.x = {xxx} ）上 const A = Vue.extend({}) //VueComponent构造函数 const b= new A() Vue.prototype.x = b 可调用$on $off $emit $on，绑定事件 $off，解绑事件 $emit，触发事件 三者均在Vue的原型上 绑定全
vue+vuex+axios+element-ui实现登录页面
qq_40549954的博客
10-05 2791
这个例子只是简单实现了登录页面的部分功能，包括用户信息（用户名、密码）的验证，登录跳转到主页等功能。 1.目录结构 2.运行效果 3.代码实现 由第一点我们可以看到项目的目录结构整体概要，我们编写代码的思想是从aip–>store–>views。由于api中的方法整体封装到utils中，因此，我们先编写utils中的代码。 utils中新建两个js文件，分别为config.js和request.js。在config.js中编写用于维护项目的配置文件，或者公共的将来可能发生更改的数据。在req
Vue前端框架选型论述
秋枫落落的博客
05-29 1427
Vue前端框架选型论述 1. 前端3大巨头框架综述 React 起源于 Facebook 的内部项目，社区非常活跃，下载使用当前排行第一名，但是 React 的只能是半开源，在不涉及到 Facebook 子公司或者 Facebook 合作公司利益的条件下开源，否则属于专利侵权。React 框架相对于 Vue 要复杂的多，学习成本高于Vue。 AngularJS 诞生于2009年，由Misk...
VUE技术框架选择简报
gdjychbsh的博客
04-01 181
文章目录前言一、PC端二、Mobile H5、小程序、APP总结 前言 2019年初单位为降本增效，决定把前后端工作彻底分离。对于前端团队来说，选择适于项目需求且稳定持续可扩展的框架尤为重要。毫无疑问，肯定是vue.js，因为有感情。首先它是一套渐进式框架，2017年我们用MVC模式开发时就用vue.js构建界面，当时使用了iview组件库尝鲜；二来它是国人开发，不怕哪天**book修改开源许可；三来更多国人使用，更多可读的生态。对，没错，就是这些原因。对于MVVM模式的框架的对比可参考vue官方对比ht
Vue前端框架选型论述，linux系统架构和应用技巧
m0_64867220的博客
12-09 853
Vue 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue 当前社区活跃度比 React、AngularJS高，使用量增长率最高，预计今年年底使用量将超过 AngularJS。 2. 三大框架社区活跃度和使用量对比 社区活跃度对比 React github Star 数量：130k AngularJS github Star 数量：59.6k Vue .
Vue组件框架（ElementUI+Axios+Vuex）
风吟Pro的博客
08-24 820
比如导航栏，可以把他封装起来，再其他位置进行使用新建组件标签查看样式组件化开发扩展因为ElementUI比较成熟的是基于Vue2.x的版本，所以我们这里创建一个Vue2的项目来演示ElementUI切换到工程文件目录下，命令新建文件，选择2.0版本进行创建vue create 项目名创建完毕后加入工程创建一个组件基础内容，可以直接嵌入使用不过这样有个缺点，就是内容只能在卡片内部进行使用，无法被调用卡片的页面进行获取这里Vue提供了一个属性，供外界调用者对数据进行处理。
Vue全家桶精简配置（vue-cli,vuex,axios,vue-router,elementUI）
weixin_39763493的博客
07-16 675
在上一篇介绍使vue-cli3搭建了项目，并添加了一些基础的配置，现在就来和大家一起将项目需要用到的工具准备好。vue-cli在上一篇已经说了，这边就不重复了， axios
Vue Router、Axios 和 Vuex - 前端开发的完美组合
RoGroovy的博客
09-19 129
在本文中，我们将探讨如何使用 Vue Router、Axios 和 Vuex 这三个库来构建一个完整的前端应用。Axios 的优秀之处在于它具备跨浏览器和跨平台的特性，能够在浏览器和 Node.js 中使用。通过使用 Vue Router，我们可以实现单页应用（Single-Page Application，SPA）的路由功能，使用户能够在应用程序中进行导航，同时不会重新加载整个页面。通过在组件中派发（dispatch）操作，我们可以改变状态，并通过 Getter 方法获取最新的状态。
springboot+flask+vue
04-02
Vue.js是前端框架，用于构建用户界面，通常与后端服务通过API交互，实现前后端分离。 接下来，用户可能需要知道如何将它们集成在一起，或者在不同场景下选择哪种技术栈更合适。比如，如果项目需要高性能、高并发的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值