位置: IT常识 - 正文

如何用VUE从零创建网站(如何使用vue)

编辑:rootadmin
如何用VUE从零创建网站 1. 如何建一个网站围绕主题,查看一些大型网站是如何设计的自己对主题有一定了解后,设计草图(包括功能、逻辑跳转、页面大致排版等)项目成员和老师对草图设计提出意见,再进行修改最后才到正式开发

网站推荐:

松果互联:免费高级WordPress主题/网站模版/UI KIT下载-WEIDEA(网站模板)

iconfont:iconfont-阿里巴巴矢量图标库 (阿里巴巴矢量图标库)

vant:Vant 3 - Mobile UI Components built on Vue (移动组件库)

element-ui:Element - The world's most popular Vue UI framework(组件库)

dataV:介绍 | DataV(大屏数据)

echarts:Examples - Apache ECharts(绘制图表)

RGB取色器:http://xiaohudie.net/RGB.html

在线颜色选择器:在线颜色选择器 | RGB颜色查询对照表(提供配色参考)

千图网:千图网-免费设计图片素材网站-正版图库免费设计素材中国 (查找高清大图)

2. 项目开发的准备工作

工具推荐:vue-cli、idea、git

脚手架介绍:vue的脚手架是什么_liulang68的博客-CSDN博客_vue脚手架是什么

idea中如何配置git:IntelliJ IDEA 如何配置git_春天里的水稻的博客-CSDN博客_idea配置git

中文版:git 使用简易指南 (bootcss.com)

英文版:Git - Book (git-scm.com)

2.1 vue-cli

可以利用vue的脚手架vue-cli搞定目录结构,本地调试,单元测试,热加载及代码部署

操作->在项目文件夹处cmd,然后用vue-ui指令唤起即可

推荐整理分享如何用VUE从零创建网站(如何使用vue),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:用vue做一个简单的项目,vue编写,vue从零开始,如何用vue从零创建组件,使用vue创建项目,用vue做一个简单的项目,如何使用vue,使用vue创建项目,内容如对您有帮助,希望把文章链接给更多的朋友!

2.2 git

① 先电脑下载配置git,idea上也配置好git

② 在github或gitee上创建项目仓库,做好密钥配置等等

③ 在本机创建文件夹,右击文件夹选择Git Bash Here、在输入git init来初始化仓库

常用git指令:

git分支:在开发新功能时,尽量把新功能放到新分支上,等搞完了再并入主分支

创造新分支:git checkout -b 分支名 (这里-b就是创造新分支,checkout就是切换到这个分支)

查看当前项目中的所有分支:git branch,打 *号的是我们所处的分支

合并分支:①先切换到主分支 git checkout master ② git merge 要合并的分支名

推送分支:直接git push (ps:云端一开始默认只有一个分支)

如果需要第一次推送云端没出现的分支,需要①切换到我想推送的分支 ②git push -u origin 远程分支名(如果云端有了这个分支,就不用写-u了)

拉取分支:如果是多人合作的项目,要先git pull从远程仓库拉取,才能再上传

查看目前文件状态:git status

向暂存区中添加文件:git add 文件名 或*

将文件从暂存区提交到仓库:git commit -m '语句描述'

查看各种版本的文件:git log (每个版本都有独特的一串代码,要恢复对应版本的,就用那个代码)

本地仓库回退:git reset

远程仓库回退:自行搜索...

2.3 常用插件

已安装插件:

运行依赖:(整个项目需要的插件和框架)

开发依赖:(一些测试工具、上线工具,是开发时需要使用的)

2.4 重要文件

src/main.js:引入更多的东西或做一些全局的处理工作

这里的东西的作用域是全局,所以引入css要慎重,可能会有样式冲突

一般import一些全局使用的东西,如css,js,以及router、axios等

src/router/index.js:路由跳转

当你想跳转到一个新的vue页面,需要在此处import你写的xxx.vue

src/plugins/element.js:按需导入要引用的组件,如element-ui库中的组件

src/assets:存放项目中需要用到的资源文件,css、js、images等

src/components:存放通用的组件

src/app.vue:使用标签<route-view></router-view>渲染整个工程的.vue组件。

我个人将它理解为该项目的根VUE实例

3. 实操经验3.1 如何发送指令

只是import axios无法在组件中使用axios

3.1.1 mixin混入来封装axios请求

下载axios插件(这个一般在创建项目的时候就会让你选择下载),全局混入(main.js)将影响每一个之后创建的Vue实例,在任何组件中使用该方法时只需要直接调用就好。

import axios from "axios";//引入axios// 创建一个全局mixinVue.mixin({ methods:{ $get(url,data){ return axios.get(url,{ params:data }) }, $post(url,data){ return axios.post(url,data) } }})

不用混入,写成这样也可以,只是调用的时候不能直接this.$get,而是this.$axios.$get

//将$axios挂在原型上,以便在实例中能用this.$axios能够拿到Vue.prototype.$axios = axios;3.1.2 在created中发送请求

在生命周期中执行created函数时,页面还未渲染,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,但是挂载到dom上的阶段还没开始。

我一般会在created里调用获取数据的方法,因为在该生命周期可以调用methods中的方法,来改变data中的数据,并且修改可以通过vue的响应式绑定。此时页面还没有加载出来,我就已经向后端接口发送请求了。

created() { this.getData(); this.$scrollTo(); }, methods: { async getData() { let {data} = await this.$get( "http://xxx/xxx/xxx/" + this.query + "/" + this.page) this.content = data.company; this.sumRecords = data.totalRecords; if (this.sumRecords > 6) { this.hasMore = true; } this.loading = false; },3.1.3 使用async/await来处理异步

async的用法:async它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思。异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async函数返回的是一个promise 对象。async 函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号 且 使用 .then的方法。

await的用法:简化promise,只要返回的数据部分

3.2 路由跳转3.2.1 路由传值 router-link<router-link to="/contactUs"> <i class="fa fa-phone"></i></router-link><router-link :to="{ path: '/retrieval', query: { query: suggestion } }" tag="a"></router-link>data() { return { //注意的是接收参数的时候是route而不是router query: decodeURI(this.$route.query.query) }

<router-link :to="...">等价与router.push()

3.2.2 路由传值 this.$router.push()

想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的URL

this.$router.push("/retrieval" + "?query=" + this.input);//传值this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})//用query获取值<p>提示:{{this.$route.query.alert}}</p>3.3 组件基础3.3.1 组件复用

3.3.2 通过Prop向子组件传递数据<Industry_Company :industry_code="industryInfo.industry_code" :industry_name="industryInfo.industry" :query="query"></Industry_Company>export default { name: "Industry_Company", props: ['industry_code','industry_name','query'],}3.4 其他

$ 是在 Vue 所有实例中都可用的 property ,这样做会避免和已被定义的数据、方法、计算属性产生冲突。

Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滚动行为:smooth平滑滚动,instant瞬间滚动,默认值auto,等同于instant })}4. 如何上线4.1 在执行build命令期间移除所有的console

运行build时会生成dist目录(dist目录里的index.html),在上方的输出面板可以看到警告信息,注意build时是不允许代码有console的。安装开发依赖 babel-plugin-transform-remove-console,然后去babel.config.js的plugins数组里写上transform-remove-console

由于babel.config.js是全局共享的,我们希望项目发布阶段是要移除console,但是项目测试和开发阶段我们不希望移除console。所以定义process.env.NODE_ENV的值是production才移除console

//这是项目发布阶段需要用到的babel插件const prodPlugins = []//判断是开发还是发布阶段if(process.env.NODE_ENV ==='production'){ prodPlugins.push('transform-remove-console')}4.2 实现路由懒加载

路由懒加载:当路由被访问时才加载对应的路由文件,这样进入首页不用一次加载过多资源造成用时过长

安装开发依赖 @babel/plugin-syntax-dynamic-import在babel.config.js中
本文链接地址:https://www.jiuchutong.com/zhishi/296050.html 转载请保留说明!

上一篇:chatpdf使用说明(chat form)

下一篇:VS Code上搭建Vue开发环境(visual studio code怎么创建vue项目)

  • 苹果手机icloud照片怎么恢复到相册(苹果的照片icloud)

    苹果手机icloud照片怎么恢复到相册(苹果的照片icloud)

  • 华为nova5pro能升5g吗(华为nova5pro能升级鸿蒙系统3.0吗)

    华为nova5pro能升5g吗(华为nova5pro能升级鸿蒙系统3.0吗)

  • 锐捷路由器默认密码(锐捷路由器默认用户名和密码)

    锐捷路由器默认密码(锐捷路由器默认用户名和密码)

  • 联想电脑无法关机(联想电脑无法关机怎么解决)

    联想电脑无法关机(联想电脑无法关机怎么解决)

  • 好友标识关了对方还显示吗(关了好友互动标识)

    好友标识关了对方还显示吗(关了好友互动标识)

  • 华为视频的芒果TV会员可以登录电脑吗(华为视频的芒果会员可以给其他手机)

    华为视频的芒果TV会员可以登录电脑吗(华为视频的芒果会员可以给其他手机)

  • 对方已删除账号什么意思(对方已删除账号微信)

    对方已删除账号什么意思(对方已删除账号微信)

  • 华为咋不显示运行内存(华为手机怎么不显示运动数据?)

    华为咋不显示运行内存(华为手机怎么不显示运动数据?)

  • 腾讯的蓝光和臻彩区别(腾讯视频蓝光和hdr臻彩哪个好)

    腾讯的蓝光和臻彩区别(腾讯视频蓝光和hdr臻彩哪个好)

  • 红米note8是全网通吗(红米note8pro5g全网通)

    红米note8是全网通吗(红米note8pro5g全网通)

  • 超过1g的视频怎么发送微信(超过1g的视频怎么保存)

    超过1g的视频怎么发送微信(超过1g的视频怎么保存)

  • 小米笔记本有小爱同学吗(小米笔记本有小爱同学功能吗)

    小米笔记本有小爱同学吗(小米笔记本有小爱同学功能吗)

  • iphone11设备管理在哪(iphone11设备管理不见了)

    iphone11设备管理在哪(iphone11设备管理不见了)

  • 查找替换快捷键(Word文档查找替换快捷键)

    查找替换快捷键(Word文档查找替换快捷键)

  • 公众号可以看到访客吗(公众号可以看到谁关注吗)

    公众号可以看到访客吗(公众号可以看到谁关注吗)

  • word文档怎样填充颜色(word文档怎样填充)

    word文档怎样填充颜色(word文档怎样填充)

  • 来电时语音提示有用吗(来电时语音提示什么意思)

    来电时语音提示有用吗(来电时语音提示什么意思)

  • 苹果x怎么显示电量数字(苹果X怎么显示运行程序)

    苹果x怎么显示电量数字(苹果X怎么显示运行程序)

  • 手机护眼模式怎么设置(手机护眼模式怎么弄)

    手机护眼模式怎么设置(手机护眼模式怎么弄)

  • spn-al00是什么机型(spn一al00是什么型号多少钱)

    spn-al00是什么机型(spn一al00是什么型号多少钱)

  • 苹果xs港行支持电信吗(苹果xs港行支持电信卡吗)

    苹果xs港行支持电信吗(苹果xs港行支持电信卡吗)

  • 抖音把对方移出粉丝对方知道吗(抖音把对方移出黑名单后对方有提示吗)

    抖音把对方移出粉丝对方知道吗(抖音把对方移出黑名单后对方有提示吗)

  • 5d4可以长时间摄像吗(5d4可以长时间摄影吗)

    5d4可以长时间摄像吗(5d4可以长时间摄影吗)

  • ipadpro11寸和12.9差别(ipadpro11寸和12.9寸屏幕差别大吗)

    ipadpro11寸和12.9差别(ipadpro11寸和12.9寸屏幕差别大吗)

  • ocxdll.exe - ocxdll是什么进程 有什么用

    ocxdll.exe - ocxdll是什么进程 有什么用

  • Linux下修改文件描述符的大小的方法(linux 文件修改)

    Linux下修改文件描述符的大小的方法(linux 文件修改)

  • sestatus命令  显示SELinux状态(sysstat命令)

    sestatus命令 显示SELinux状态(sysstat命令)

  • java门面模式是什么(spring 门面模式)

    java门面模式是什么(spring 门面模式)

  • 房产税的征收范围包括农村吗
  • 小规模费用发票多有什么用途
  • 小规模纳税人可以开13%的发票吗
  • 离岸外包和国内外包区别
  • 移动话费可以开企业发票吗
  • 小型微利企业预缴
  • 退货手续费账务怎么处理
  • 存货报废应如何记账
  • 收到联营单位投入的设备一台
  • 小规模都纳什么税
  • 按折现率计算现值
  • 发票纳税人识别号错了能重新开吗
  • 安家费要还吗
  • 体检发票开公司还是个人
  • 事业单位固定资产管理办法
  • 外卖收入增值税怎么算
  • windows11怎么删除临时文件
  • 酒店采购布草如何入账
  • dc.exe是什么程序
  • PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
  • 债权投资 科目
  • 股权融资服务协议
  • 企业在搬迁期间发生的搬迁收入和搬迁支出
  • 借管理费用贷应交税费个人所得税
  • 卸载的应用怎么找回来
  • linux时间12小时制
  • thinkphp d方法
  • 详解Yii2 rules 的验证规则
  • php快速排序非递归
  • file读取文件内容
  • 建筑业的印花税是按含税还是不含税?
  • 增值税发票查验结果不一致是什么意思
  • 研发费用大于收入
  • 预提费用核算内容有哪些
  • 帝国cms视频教程
  • 附有销售退回条件的商品销售
  • 游戏公司不开票怎么缴税
  • 物流辅助服务属于什么科目
  • 制造费用分配后总账月末余额在哪方?
  • 期末增值税结转后未交增值税有余额,对吗
  • 发票专用章和财务专用章可以同一人保管吗
  • 什么叫日常业务
  • 财政补助资金不需要政府采购
  • 逃税是什么意思?
  • 基层工会经费收入来源包括
  • 应收账款无法收回会计分录
  • 预付账款如何调平
  • 工资计提多了冲账怎么办
  • 应交税费附加税明细科目
  • 进项税额转出多了怎么调整
  • 残疾人就业保障金征收使用管理办法
  • 在建工程不做了发生的费用如何做账?
  • 编制合并报表时最关键的一步
  • 支票为什么不能取钱
  • 商业企业内部物流的主要作用是保证商品的正常销售
  • 分页存储过程的实现
  • debian更新软件
  • mac安装pyenv
  • saproxy.exe - saproxy是什么进程 有什么用
  • 免打扰模式在哪关
  • lnmp php
  • win8开始菜单变为win10
  • android canvas scale
  • perl中的$_
  • 将网页改换成黑白
  • ADB (Android Debug Bridge)常用命令
  • android应用开发基础
  • node.js 的适用场景?
  • jquery cookie用法
  • Android 自定义view
  • 省市区json
  • android实时获取微信聊天信息
  • 农村集体土地承包法
  • 浙江电子税务局网上开票
  • 商业发票发票号怎么填写
  • 税务稽查条例操作规程
  • 国家税务总局江西省
  • 网上申领的电子发票如何读入金税盘
  • 重庆税务电子发票登录
  • 作废的发票验旧之后怎么领取新发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设