搭建Vue项目以及项目的常见知识

已于 2023-06-25 15:42:12 修改
阅读量481 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript webpack
于 2023-06-24 13:18:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NeverFG/article/details/131360711
版权

前言：使用脚手架搭建vue项目，使用脚手架可以开发者能够开箱即用快速地进行应用开发而开发。

搭建

#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#选择所需要的选项

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

cd my-project
npm run dev

在这里插入图片描述

访问localhost:8080
在这里插入图片描述

vue目录层级

理解vue项目的目录层级以及文件的作用十分很重要

├── build/               # Webpack 配置目录
├── dist/                # build 生成的生产环境下的项目
├── config/               # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/                # 依赖包，通常执行npm i会生成
├── src/                 # 源码目录（开发的项目文件都在此文件中写）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│   ├── components/        # 公共组件
│   ├── filters/           # 过滤器
│   ├── store/    　　　　 # 状态管理
│   ├── routes/            # 路由，此处配置项目路由
│   ├── services/          # 服务（统一管理 XHR 请求）
│   ├── utils/             # 工具类
│   ├── views/             # 路由页面组件
│   ├── App.vue             # 根组件
│   ├── main.js             # 入口文件
├── index.html         # 主页，打开网页后最先访问的页面
├── static/              # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc             # Babel 转码配置
├── .editorconfig             # 代码格式
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json         # 本项目的配置信息，启动方式
├── package-lock.json         # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md         # 项目说明

1、Vue的生命周期

vue生命周期图以及详情可以查看官方文档：Vue生命周期

Vue实例具有生命周期：beforeCreate( 创建前 )、created ( 创建后 ）、beforeMount、mounted、beforeUpdate、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

beforeCreate( 创建前 )

在Vue实例创建前，el 和 data 并未初始化，无法访问methods，data，computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。挂在阶段还没有开始, $el属性目前不可见，你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性，也可以发异步请求。

beforeMount

此时已经完成编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，
这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
生命周期内容转载至：作者：前端_周瑾 来源：简书
链接：https://www.jianshu.com/p/672e967e201c

2、Vue导入导出：import export

使用场景：一些公共的方法可以写进js中，并进行导出，在需要用到的时候将其导入即可使用

本案例：
创建后的项目为：
在这里插入图片描述

首先在static中创建一个common.js，并在common.js中定义一些公共方法

var common = {
  getFullName(firstName, secondName) {
    return firstName + secondName
  }
}

export default common

在这里插入图片描述

全局导入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import common from "../static/js/common";

Vue.config.productionTip = false
Vue.prototype.$common = common
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在这里插入图片描述

如何使用呢？
this.$common来调用里面的方法

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      firstName:'hello',
      secondName:'world'
    }
  },
  methods:{
    getFullName(){
      return this.$common.getFullName(this.firstName,this.secondName)
    }
  }
}

在这里插入图片描述

 <h2>{{getFullName()}}</h2>

效果如下：
在这里插入图片描述

3、路由

更多知识请看官方文档：路由
原本项目中是：
在这里插入图片描述

现在可以在components文件夹中创建多一个vue组件，本案例创建Info.vue

 {
      path: '/Info',
      name: 'Info',
      component: Info
    }

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

效果如下：
在这里插入图片描述

路由跳转 $router
#在HelloWorld.vue中添加
   <button @click="$router.push('Info')">Info</button>

点击按钮后跳转：
在这里插入图片描述
在这里插入图片描述

又或者将跳转写成一个方法，两者效果一致：

#methods中添加方法
  goToInfo(){
      this.$router.push('Info')
    }

#添加一个按钮，绑定一个点击事件
 <button @click="goToInfo()">Info</button>
vue router 路由跳转常用的4 个方法
#1、/xx 路径名
this.$router.push（'/xx'） 
 
 
#2、路由带参数 query中放置参数
this.$router.push({         
   name:'xx1',
   query:{
	    name: 'zhangsan'，
            xx:xx      
          }
        })

获取参数：this.$route.query.xx

#3、路由带参
 
this.$router.push({
   path:'/xx2',      
   query:{
           xx:xx   
       }
})
 
#4、路由不会带查询参数，可以在route 里面的params 里查询到
this.$router.push({
   name:'xx3',    
   params:{
           xx:xx   
       }
})

获取参数：this.$route.params.xx
$router 和 $route的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
举例：history对象

$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

查看route的信息
 getRouteInfo(){
      console.log(this.$route.name)
      console.log(this.$route.path)
      console.log(this.$route.query)
      console.log(this.$route.params)
    }

在这里插入图片描述

路由守卫（导航守卫）

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

全局导航守卫
举一个场景：用户需要登陆了才可以访问系统的后台页面，不然的话不允许进行页面跳转。
在main.js中添加：

import router from './router'

#路由守卫

router.beforeEach(({name}, from, next) => {
  // 获取用户的JWT Token信息验证用户是否登陆
  if (localStorage.getItem('token')) {
    // 用户已经登陆了，如果用户在login页面
    if (name === 'Login') {
      //跳转至首页 /
      next('/');
    } else {
      next();
    }
  } else {
    if (name === 'Login') {
      next();
    } else {
      next({name: 'Login'});
    }
  }
});


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

此处路由参数内容转载至：
作者： 妖色调
网址： https://www.cnblogs.com/loveyt/p/10905662.html

Axios异步请求

发送请求给服务器一般都是异步请求，在main.js中配置全局axios

import axios from 'axios'
Vue.use(VueAxios,axios)

//{config}其他配置，譬如说请求头等信息
发送Get请求：

 this.$axios.get('url',{config}).then(res => {
  //处理返回的数据结果
})

发送Post请求：

 this.$axios.post('url',data,{config}).then(res => {
  //处理返回的数据结果
})

发送Delete请求：

 this.$axios.delete('url',data,{config}).then(res => {
  //处理返回的数据结果
})

发送Put请求：

 this.$axios.put('url',data,{config}).then(res => {
  //处理返回的数据结果
})

请求拦截器interceptors

前端拦截器interceptors，作用是拦截请求
场景：每次发送请求到服务器时，都带上token验证
在main.js中添加

axios.interceptors.request.use(config=>{
//从本地localStorage获取token信息，并放置在请求头中
  if(localStorage.getItem('token')){
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config;
});

过滤器filter

场景：项目中对于日期数据格式的过滤
在main.js中添加

Vue.filter('formatDate', function(value) {
  // return Moment(value).format('YYYY-MM-DD HH:mm:ss')
  return Moment(value).format('YYYY-MM-DD')
})

使用：

 <div class="time">{{ birthday | formatDate }}</div>
TorlesseLiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue简要概述（Vue的使用意义以及MVVM）
Angletank的博客
10-14 818
VUE Vue ：一款渐进式 JavaScript 框架 (渐进式就是逐步实现新特性)， ​ 如实现模块化开发、路由、状态管理等新特性。 ​ 其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点； Axios ：前端通信框架； ​ 因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力， ​ 此时就需要额外使用一个通信框架与服务器交互； ​ 当然也可以直接选择使用 jQuery 提供的AJAX 通信功能； 其他javaScript框
【VUE项目实战】1、学习目标以及概述
程序猿之洞
06-13 4035
之前我们分别学习了ES6和Vue的基础，下面新开启的系列，是从0开始通过Vue搭建一个电商管理系统，从而学习Vue的具体实战。 以下博文记录，均参考黑马程序员（www.itheima.com）Vue项目实战教学视频，由本人进行学习总结记录。 本篇主要介绍该系列的学习目标以及使用到的技术概述。 一、学习目标 1、能够基于Vue初始化项目 2、能够基于Vue技术栈进行项目开发 3、能够使用Vue的第三方组件进行项目开发 4、能够说出前后端分离的开发模式 总的来说，就是可以使用Vue进行项目的开发，能够利
Vue项目的基本介绍
故事与我
05-13 1570
Vue 是一套用于构建用户界面的渐进式框架 优点：易用 灵活 高效 官网： https://cn.vuejs.org/ 引入Vue.js 开发环境 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生产环境 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!DOCTYPE html> &
【Vue介绍】
zz130428的博客
05-10 434
Vue.js是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 使用了基于 HTML 的模板语法，允许声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 引入vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2/.
vue项目默认关联git分支master改为main并正确提交
xiaoyingyings的博客
03-02 968
vue项目创建后，默认关联git分支master改为main，并正确提交到远程仓库。
elementUI+vue项目搭建
12-10
在这个项目搭建过程中，我们将深入探讨Vue.js的基础知识、Element UI的使用方法以及如何将两者整合到一个项目中。 Vue.js 是一套用于构建用户界面的渐进式框架，它的核心库专注于视图层，易于学习且与其它库或现有...
Vue模板：Vue项目模板
02-18
Vue项目模板是开发者快速搭建Vue应用的基础框架，简化了项目的初始化工作，使得开发者可以更专注于业务逻辑的实现。 在“Vue项目模板”中，我们通常会看到以下关键知识点： 1. **脚手架工具**：Vue CLI（Vue命令行...
webpack搭建的一个vue项目模板
08-29
Webpack 搭建的 Vue 项目模板是一种常见的前端开发架构，它将 Vue.js、Webpack、axios、Element UI、自定义指令、过滤器、Vuex Store 和 Vue Router 等组件结合在一起，为开发者提供了一个高效、灵活的工作环境。...
node+vue全栈项目
最新发布
05-14
在现代Web开发中，"Node.js + Vue.js全栈项目"是一种常见的技术组合，用于构建高效、可扩展的Web应用程序。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Node.js是基于Chrome V8引擎的JavaScript运行环境，...
用Webpack构建Vue项目的实践
08-28
在本文中，我们将探讨如何使用Webpack构建Vue项目，这是一个现代...掌握这些步骤，可以帮助开发者更高效地搭建Vue应用，并提供良好的开发体验。通过实践和理解这些知识点，你将在Vue.js和Webpack的结合使用上更加熟练。
vue的目录结构与大致的执行流程
Eric_fo的博客
04-24 985
关于vue的目录结构和执行过程的一些理解
Vue项目中每个文件夹和文件的用处
weixin_44244924的博客
03-29 2099
Vue项目中每个文件夹和文件的用处
vue脚手架各项文件夹的作用
Acme07的博客
03-03 507
vue文件夹各项文件夹说明
Vue项目的详细目录结构解析 vue-cli
weixin_49827467的博客
02-15 1807
vue-cli 目录详解
vue中各个文件夹的含义
一颗帅白菜的博客
05-17 1567
2.public文件夹：用于存放项目使用到的一些静态资源（图片）等，在最后webpack打包时会直接放入dist文件夹内。4.assetes：一般用于放置src里的组件所使用的静态资源（在webpack打包时会被当成一个模块打包到js文件夹里）10.babel.config.js：项目的配置文件，一般用于兼容es5和es6语法。5.components：一般用于放置非路由组件和全局组件。9.main.js：程序的入口文件，项目中第一个执行的文件。11.package.json：记录vue项目的相关信息。
vue目录解析
qq_38847914的博客
05-17 252
vue-cli目录解析： build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下2. webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。 config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者...
vue cli3创建的项目目录解析
qq_50406265的博客
07-23 1407
vue cli3创建的项目目录解析
谈谈对vue渐进式的理解
weixin_49733248的博客
07-29 1247
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ...
鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统
m0_66404702的博客
01-16 1315
前端架构采用VUE、Uniapp、Layui、Bootstrap、H5、CSS3等技术，后端涉及Eureka、Config、Zuul、OAuth2、Security、OSS、Turbine、Zipkin、Feign、Monitor、Stream、ElasticSearch等技术。项目计划管理：计划的查询、新增、编辑、删除、甘特图保存为基线、设置为模板、任务时间及顺序调整、全局资源配置、引用系统模板、导入project文件、导出XML文件等功能。项目合同：合同的新增、编辑、删除、导出、查询。
Vue学习笔记：从环境搭建到项目实战
本资源是一份详细的Vue前端开发学习笔记，涵盖了从基础入门到实战项目的全过程，适合初学者和希望进一步提升Vue技能的开发者参考。以下是主要内容概要： 1. **环境搭建**： - 使用Node.js和npm进行环境配置，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TorlesseLiang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值