正文

tzxblog博客系统-vue前端项目搭建和要点记录

tuzongxun  2022-02-13  532

关键词：

vue-cli2和vue-cli3（vue-cli4）的一些区别

据我目前的了解，创建vue项目，vue-cli不是必须的，但是在实际开发时，几乎就是必须的。vue-cli既可以看做是一种创建vue项目的快捷工具，也可能理解成是vue的一种规范。
由于本机的vue-cli安装较早，还是vue-cli2的版本，而如今早已经是vue-cli4，所以也是时候进行一定的升级了，升级过程以及升级之后的部分区别记录如下：

vue-cli安装

v2：npm i -g vue-cli
v3/v4：npm i -g @vue/cli

创建项目

v2：vue init projectName
v3/v4：vue create projectName

启动项目

v2：npm run dev
v3/v4：npm ren serve

端口修改

vue-cli创建的项目，默认端口号是8080，一般正式开发都不会直接使用这个默认端口号，了解java后端开发的就会知道，tomcat的默认端口号也是8080，通常也一样都需要修改一下。
在vue-cli2中，端口号修改起来可能相对更简单，直接在项目的config目录下能找到index.js文件，然后修改里边的port属性即可。
但是vue-cli3创建的项目整体结构不同，也没有了config目录，他的端口号修改显得比较隐蔽，需要一层层找到如下文件，然后修改里边的端口号：
node_modules@vuecli-servicelibcommandsserve.js

const defaults = {
  host: ‘0.0.0.0‘,
  port: 8080,
  https: false
}

vue的一些基础用法

组件安装

在我目前的需求中，除开创建项目时选择的router之外，已知需要的就还有axios和vant的组件依赖。对于技术选型，axios用来在vue中进行ajax请求，vant用作ui设计。
作为后端为主的前端菜鸟，现在用过的ui技术只有element-ui、bootstrap、vant，有的还只是用了一两下，早就忘到了千里之外，所以这次也是希望可以选择一个主修，最终就锁定在了vant上。
组件安装命令如下：



cnpm i vant -S

cnpm i axios -S

cnpm i babel-plugin-import -D

上边最后一个的作用是为了vant的组件按需引入，查看vant官网会有说明。
额外提一点的就是，安装了cnpm之后，安装起依赖确实比之前的npm快了非常非常多，尤其是如今身在农村之能手机热点联网的情况下。

组件使用

组件的安装我理解为就是java里边maven下载jar包，那么和java一样，在使用的地方也需要引入。
axiox的引入，是在main.js中：



import axios from ‘axios‘

Vue.prototype.$http=axios

就目前的理解，上边的代码，第一行是必要的，第二行不是必须，写法也不一定非要这样，应该是一种习惯。我跟着教程学，也就按照这样写了。

vant的引入，和axios不太一样，不是main.js，而是router目录中index.js下：



import { Tab, Tabs } from ‘vant‘;

import { Sidebar, SidebarItem } from ‘vant‘;

Vue.use(Sidebar);

Vue.use(SidebarItem);

Vue.use(Tab);

Vue.use(Tabs);

这个地方我其实还不是太明白，因为一开始ui组件的引用也放在了main.js中，但是页面却不显示，挪到了index.js中之后就可以正常使用，希望在后续学习和敲代码应用的过程中能进一步弄清楚。

组件（component）和视图（view）的区别

在vue-cli3或者vue-cli4中，项目目录有components和views这两个目录，就目前的理解来说，里边的代码用法基本一样。
view可能更侧重于整体的页面，而compenent则是零散的局部的一些，从一开始的学习中来说，可以尽量规范的划分，但是也可以都放在一个目录下，并不影响实际的功能。

关于this和_this

this是一个关键字，代表的是当前对象，在java中也是有的。
而vue中的this，有一个用法可能需要记录，那就是在某些地方使用之前可能需要把this先赋值给另一个变量，比如_this。
_this应该是一个普遍的写法，却不是硬性的规定，也可以叫其他的名字。
它的出现，是因为在一个视图或者组件中，可能会有非常多的对象，比如点击事件等，这时候很容易分不清当前的this代表的是哪个，从而加大错误率和调试难度。

静态资源

不论是真是项目，还是学习时的demo，总是少不了一些静态资源，在vue-cli4中，静态资源需要一般放在public目录下，例如可以在public下创建一个css文件夹存在css样式文件，可以在public下创建一个img文件夹存在图片等资源，也可以创建一个json目录存放模拟数据的json文件。
当然了，这些命名都不是必须的，也都可以自定义，只要使用的时候保持一致即可。

使用axios进行http请求

http请求有get、post、put等，最长用的是get和post，这里就先以此记录axios的语法：



this.$http.get(url,{params:{paramName:paramValue}}).then(function(res){

console.log(res);

})

this.$http.post(url,{data:{paramName:paramValue}}).then(function(res){

console.log(res);

})

以上是基础用法，也是单请求的简单示例，但实际上很多时候一个功能的最终结果是需要多个请求处理后才能实现，这就还需要借助spread：



this.$http.all([this.$http.post(url1),this.$http.get(url2)]).then(

this.$http.spread((res1,res2)=>{

console.log(res1);

console.log(res2);

}

)

);

以上不论是get、post单请求，还是合在一起的复合请求，都用到了$http，可能会有人有疑问。这里实际上是因为上边所说的引入了axios后，加了Vue.prototype.$http=axios这一行，所以这里$http代表的就是axios，也算是一种习惯性写法。

项目地址

项目代码和文档均以github托管，地址如下：
https://github.com/tuzongxun/tzxblog

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

node.js开发博客系统前端项目搭建

Express：https://github.com/petecoop/generator-express安装node.js和npm执行：npminstall-gyonpminstall-ggenerator-express　　执行：yo创建项目成功。项目的目录：brew安装：MongoDbhttp://blog.csdn.net/moumaobuchiyu/article/details/548 查看详情

前端vue项目：旅游app-博客总结

博客链接【前端】Vue项目：旅游App-（1）搭建项目、重置css、配置router和store（pinia）https://blog.csdn.net/karshey/article/details/128485988【前端】Vue项目：旅游App-（2）TabBar：搭查看详情

前端vue项目：旅游app-博客总结

博客链接【前端】Vue项目：旅游App-（1）搭建项目、重置css、配置router和store（pinia）https://blog.csdn.net/karshey/article/details/128485988【前端】Vue项目：旅游App-（2）TabBar：搭建TabBar、循环获取动态数据... 查看详情

记搭建vue项目里的一些小坑

输入npmrundev启动项目之后报了一串错误，如下：就是一些空格缩进不规范报的错误，百度了一下发现是我初始化项目的时候UseESLinttolintyourcode?(Y/n)这一步选择了Y，设置了eslint。由于写法不标准引起的，因为我是初学者不... 查看详情

基于laravel9+vue+elementui搭建的博客管理系统

项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情

记spring搭建功能完整的个人博客「oyster」全过程[其一]整体思路：需求架构及技术要求(代码片段)

...在了解Linux内核，看得有点累，突然想趁着五一放假写个博客学学spring。由于没有在一开始下定决心写这个博客系统，所以我又没记录一开始的分析过程。这都是写了一个星期之后的思路了。写这个随笔就仅当作再次理清思路吧... 查看详情

记自己利用hexo和github搭建个人博客的过程

...-----------------------------------　1、先看成果---小小易的个人博客2、工具+版本npm3.10.8gitShell3、开始1),先从简单的开始；先去github里创建一个repository;如图; 创建查看详情

记spring搭建功能完整的个人博客「oyster」全过程[其二]idea中maven+springboot多模块项目开发的设计和各种坑（模块间依赖和打包问题）

大家好嘞，今天闲着没事干开写写博客，记录一下Maven+SpringBoot的多模块设计和遇到的坑。多模块设计简单说明一下截止目前的需求：需要RESTfulAPI：对文章、标签、分类和评论等的CRUD要前台展示：首页、归档、文章具体页等后台... 查看详情

前端vue项目：旅游app-搭建项目重置css配置router和store（pinia）(代码片段)

文章目录创建项目搭建和配置项目：项目目录结构划分重置CSSnormalize.cssreset.css目录结构配置router对应页面组件index.js配置store创建项目npminitvue@latest本项目相关选择：安装相关依赖：npminstall试着跑一下：npmrundev... 查看详情

使用vue+jfinal框架搭建前后端分离系统(代码片段)

前后端分离作为Web开发的一种方式，现在应用越来越广泛。前端一般比较流行Vue.js框架，后端框架比较多，网上有很多Vue+SpringMVC前后端分离的demo，但是Vue+JFinal框架貌似没有搜到，本文基于Vue.js和JFinal框架，给出了搭建了一个前... 查看详情

vue项目搭建及原理一

一.Vue简介 Vue简介Vue是近两年来比较火的一个前端框架（渐进式框架），与reactjs和angularjs三国鼎立,根据不完全统计，包括饿了么、稀土掘金、苏宁易购、美团、天猫、荔枝FM、房多多、Laravel、htmlBurger等国内外知名大公司都... 查看详情

（项目）生鲜超市

...离技术彻底玩转RestfulAPI的开发流程掌握Sentry，完成线上系统错误日志的监控和告警掌握第三方登录和支付宝支付接口对接　　后台管理系统通过xadmin快速搭建，详细的教程在上一个项目中介绍过。查看详情

个人博客系统项目-已开源

博客上线地址：欢迎访问我的博客！http://hikari.top项目介绍实现了一个简单的个人博客系统，技术栈为后端SpringBoot+JPA+MySQL,前端Vue+ElementUI+Echarts系统分为前台展示和后台管理两个部分，前台部分主要分... 查看详情

个人博客系统项目-已开源

基于vue+vue-cli+webpack搭建渐进式高可维护性前端实战项目(代码片段)

...f0c;将从Vue脚手架安装开始，逐步带你搭建起一套管理系统所需的架构。当然，在默认安装完成之后，会对文件目录进行初步的细化拆分，以便后续功能迭代和维护所用。为兼顾大多数计算机毕设的需求，我们... 查看详情

电商后台管理系统的前端技术栈-----vue

...小的项目，react更偏向于大型的项目；4.在搭建后台管理系统上，大家都明白的基本上是不需要太多ui图的，我们采用了ui库（iview），这个iview是跟element对比后，做出的选择，因为iview的功能更全，组件ui样式更多一些；5.项目的... 查看详情

vue.js---实现前后端分离架构中前端页面搭建

【Vue.js实现前后端分离架构中前端页面搭建】一、前后端分离1.简介前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器... 查看详情