vue2.x入门教程

news/2024/7/10 3:13:56 标签: vue, vue.js, vue-cli3

vue现在已经出到3.x了,但是2.x还是使用的更多,就像我现在工作中在做的项目。身为后端,有时候不得不也要会前端的知识,本篇就按顺序先从2.x开始入门吧。

 

vuejs_5">一、vue.js背景

先声明一下,vue.js和vue是指一个东西,vue只是vue.js的简称罢了。

vue_9">1.什么是vue

官方的说法是:vue是一套用于构建用户界面的渐进式框架

从这里我们就可以看出vue首先不是某个类库,而是一个框架,这说明它不是召之即来挥之即去的。类库我们可以随意更换,但是框架一旦更换,那就是相当于重构。

不过vue渐进式的,这说明我们依然可以把它当类库一样,简单的使用在一两个组件上。同时也可以像框架一样,让它全局接管整个项目,渐进式的想用多少就用多少,根据自己的需求选用不同的层级。

vue_17">2.vue的优势

①双向数据绑定

vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染。

②组件式开发

通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。

vue_29">二、vue的安装

虽然vue有多种方式安装,但是基本上大家都是用npm方式,稳定可靠。

npm install vue

也可以加个-g参数将其安装到全局目录下

 

vuecli_41">三、vue-cli的使用

vue官方为我们提供了一个脚手架,让我们可以快速的搭建一个vue项目,刚好可以让我们简单的体验一下vue项目。

vuecli_45">1.安装vue-cli

打开cmd,直接将vue-cli安装到全局

npm install vue-cli -g

2.初始化一个项目

初始化webpack模板的项目

安装好后,到指定的位置下用命令行初始化项目,输入

vue init webpack my-project

代表以webpack为基础创建模版,它会自动下载 vuejs-templates上的webpack模板

如果初始化成功,进入到配置vue-cli项的时候,我们一路点回车就行了,让它默认给过,因为现在我们还不了解他,只是为了启动一下玩玩。

没有外网导致下载失败的解决办法:

但是如果你无法访问外网或网络环境很差,可能会下载失败,连不上github,就会报错

image-20210429114113132

解决方法①

如果你有代理服务器,可以给npm设置好代理,依次输入如下两句

npm config set proxy http://代理IP:代理端口

npm config set https-proxy http://代理IP:代理端口

解决方法②

如果实在没法,那也没关系,我们可以选择手动下载好了放进去

到官网用git下载:https://github.com/vuejs-templates/webpack

下载好后,需要放到指定的目录下,可以先用离线初始化的语句查询一下需要放在哪里:

vue init webpack projectName --offline

它会提示no found,位置在C:\Users\用户名\.vue-templates\

image-20210429120125993

但是通常这个.vue-templates目录还没有创建,我们在cmd中将其创建出来

mkdir .vue-templates

然后将下载好的包放进去即可,注意名称要对的上

image-20210429141009583

重新跑一遍初始化指令,加上–offline代表离线情况下的初始化:

vue init webpack projectName --offline

由于我们现在还不了解怎么配置,所以配置vue-cli项的时候一路点回车就行了,让它默认给过。

初始化完毕后,在项目工程位置安装依赖包

npm install
Failed at the chromedriver@2.46.0 install script报错的解决办法

这时候就又可能出现一个问题,如图

image-20210429142119444

如果你的也是Failed at the chromedriver@2.46.0 install script.报错,说明我们的问题是一样的。

报错原因:

原因是chromedriver这个依赖包的package.json中用scripts指定了一个脚本,当install到它时,它会执行它目录下的install.js文件,偏偏这个文件貌似访问了一个国外的网站导致被墙报错了。

image-20210429150216421

解决方法①

解决方式有多种,首先我们可以将其里面的网站替换成淘宝的,方法是执行语句:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

解决方法②

如果还是失败,就只能忽略执行这个脚本了。执行时同时增加一句参数–ignore-scripts,作用是让npm不会执行script下的脚本。个人感觉肯定是有风险的,毕竟少了点东西,但是网上大多人都是这样处理的,也没见到有什么后果,所以我们也按照这样的方式解决就好了。执行语句:

npm install chromedriver --ignore-scripts

解决方法③

这个是终极方案,如果前面的都解决不了,就可以参考这个,我就是这样解决的。因为我的公司是内网的,平时是用代理访问的外网,所以找了一遍后,发现要个npm配置代理才可以,代理的地址和端口自己应该都清楚。

任意位置cmd,输入指令:

npm config set proxy http://代理IP:代理端口

npm config set https-proxy http://代理IP:代理端口

然后删掉下载的依赖目录node_modules,重新直接执行

npm install

会发现,一次性可能就过了,如果不行那就再按方法①和②的试一下。

解决方法④

前面我们都是尽量小影响的,但是如果你真的没外网,又实在想搞,那么唯一的方式就是删除下载的node_modules目录,然后重新输入

npm install --ignore-scripts

当然,它不止是针对chromedriver忽略scripts了,它显然对所有的依赖都这样做了,但是貌似网上也是有人这样做的,可能问题不会很大,算是没办法的办法了。

安装完毕

我配置了代理后,一次安装成功了:

image-20210429153725455

测试启动

输入指令启动一下这个模板:

npm run dev

启动成功,浏览器访问一下

成了,兄dei

image-20210429154053578

 

最近没时间细看这个了,决定先发布出来,如果以后有更新的打算,也会直接更新到这里

 

 

 

参考:

使用vue-cli创建工程的时候提示报错的解决方法

https://www.cnblogs.com/gaozhiqiang/p/11528554.html

npm安装的坑浏览器代理

https://blog.csdn.net/haohaounique/article/details/80498698


http://www.niftyadmin.cn/n/859270.html

相关文章

LHC或许已经首次制造出顶夸克“四胞胎”

据美国趣味科学网站近日报道,科学家表示,世界上最大的原子对撞机——大型强子对撞机(LHC)或许已经首次制造出顶夸克“四胞胎”,如获证实,有望揭示新的物理学理论。 粒子物理学标准模型允许顶夸克“四胞胎”…

远程mysql账号密码修改_mysql 5.1版本修改密码及远程登录mysql数据库的方法

mysql创建用户并授权:格式:grant 权限 on 数据库名.表名 to 用户登录主机 identified by "用户密码";grant[英][grɑ:nt] 承认; 同意; 准许; 授予;例1:允许mk用户从localhost登录mysql> grant all on book.* to mk1localhost …

AI已不仅限于面部识别,还能“读心”

近日,《自然》杂志发表了一篇论文,利用人工智能研究了性格和面部特征之间的关系。研究团队征集了12000多名志愿者,利用人工智能技术通过31000多张自拍学习了128种人脸特征,并且将志愿者的人格特征分为五类,即责任心、神…

mysql数据库表查询_MySQL数据库单表查询

一、 简单查询1. Select语句Select [distinct] * | {字段名1,字段名2,字段名3,。。。}From表名[where条件表达式1][groupby 字段名 [having 条件表达式2]][orderby 字段名 [asc|desc]][limit[offset] 记录数](1) Distinct是可选参数&#xff…

vue深度选择器/deep/无效的解决办法

背景是我需要将element-ui的upload组件样式进行修改,但是它的样式是隐藏在内部的,普通的最外层是改不到的。必须要用深度选择器深入到它里面才行。 网上找了很多方法,什么/deep/,>>>,::v-deep,全都…

包头市赛汗塔拉防火大数据正式通过验收

记者16日从内蒙古蒙草大数据平台获悉,包头市赛汗塔拉防火大数据正式通过验收,这意味着,今后一旦园区发生火情,智慧防火管理平台就能马上定位着火点并发出报警信号,同时实现烟雾、火点双重识别,并推演出火灾…

BeyondCompare4下载安装使用

BeyondCompare是个挺好用的文本比较软件,唯一的不方便是它是收费的,其实这倒也不是缺点,毕竟谁都要恰饭的嘛。只是对我们这种小喽啰来说,真的很难为每个使用的软件、游戏、音乐、视频出钱,除非你是不差钱的富二代&…

mysql 备份软件对比_mysql 001 | 3种mysql备份恢复方案优劣对比!

mysql 001 | 3种mysql备份恢复方案优劣对比!点击上方“java进阶架构师”,选择右上角“置顶公众号”20大进阶架构专题每日送达前言这周又是上线周。办公桌的头发越来越多了,保温杯都是枸杞,电脑壁纸也换成了应急逃生通道(不要问我为…