精华内容
下载资源
问答
  • vue新手教程

    千次阅读 2019-06-20 11:57:50
    然后下面那个框就要选择了,是否要安装vue-router(vue全家桶中的路由模块),一般是需要的,所以输入Y, 在下面的就是一些代码检查,测试什么的,我都是选择no,因为麻烦。OK继续回车看到如下 项目初始化成功...

    1、下载Nodejs并安装
    http://nodejs.cn/download/
    下载安装完了之后到cmd里面运行一下命令

    node

    在这里插入图片描述
    看到没,可以node回车之后,可以像chrome的console面板一样去执行命令。

    2、安装淘宝镜像

    node安装完毕,自带npm(NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题),

    但是,你身处“天朝”,要加载国外的包,那是要慢成狗,所以这里推荐安装淘宝镜像(安装完后npm 都可以用cnpm代替了),命令如下

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    3、安装vue脚手架vue-cli

    到这里你就可以安装脚手架准备初始化一个项目了,脚手架的安装很简单

    cnpm install vue-cli -g

    这里的 -g 是全局安装

    4、项目初始化

    注意接下来你将看到自己的真正的项目了,先cd到你的项目目录这里假设你的目录是

    d:workspace/

    然后执行

    vue init webpack myproject

    这里的myproject是你的项目名字,随便叫啥,当然也可以用简装版

    vue init webpack-simple myproject

    回车后会看到这些
    在这里插入图片描述
    很简单,不懂啥意思的话就查词典去,就是一些项目名称,描述,作者之类的,你可以修改也可以直接回车忽略,

    然后下面那个框就要选择了,是否要安装vue-router(vue全家桶中的路由模块),一般是需要的,所以输入Y,

    在下面的就是一些代码检查,测试什么的,我都是选择no,因为麻烦。OK继续回车看到如下
    在这里插入图片描述
    项目初始化成功了

    5、运行项目

    按照上面那个红色框的提示,先cd到你的项目目录,这里是test ,也就是

    cd test

    进来后安装依赖,执行(下面我们用到cnpm了哦,因为快)

    cnpm install

    在这里插入图片描述
    酱紫就安装完毕了,接下来就是见证奇迹的时刻,执行命令,开始运行你的项目

    cnpm run dev

    在这里插入图片描述
    完成,浏览器自动打开了你这个路径
    在这里插入图片描述
    恭喜你,你的demo就这样完成了

    展开全文
  • PS:笔者为计科专业研一在读,最近打算学习Vue,踩了许多坑,在此将学习过程分享出来,后续还会持续更新 一、安装Vue环境 首先,在安装Vue环境之前,我们首先需要安装npm这个玩意。 那么npm这个玩意是什么呢?...

    PS:笔者为计科专业研一在读,最近打算学习Vue,踩了许多坑,在此将学习过程分享出来,后续还会持续更新。

    一、安装Vue环境

    首先,在安装Vue环境之前,我们首先需要安装npm这个玩意。

    那么npm这个玩意是什么呢?官方的说法是:npm是基于Nodejs的资源包(package)管理器。

    就好比你是一个顾客,想购买商品,而npm就是一个超市,里面有各种各样的商品,Vue就是其中的一个商品,你要想购买Vue这个商品就先要到npm这个商店去。因此我们首先来安装npm

    1.1 安装npm 

    npm是包含在nodejs里面的,考虑到项目后续的需要,我们不如直接安装nodejs更加省事,安装好了nodejs也就安装好了npm,因此我们首先访问nodejs的官网:Node.js

     我们选择左边这个版本,下载安装(默认为C盘,建议更改至其他空间)笔者将空间改为了D盘,在D盘下新建文件夹名为nodejs存储。

    在安装过程中,请注意,我们一路点击next到这一步:

     笔者这里建议将Add to PATH选项去除,我们后续手动添加,原因是:笔者在安装时候默认勾选了该选项,导致实际添加进系统的环境变量仍然为C盘(猜测这可能是由于我们确实更改了默认安装路径从C盘改为了D盘,但是安装包这个程序本身的默认路径没有更改的原因),导致后续在使用npm相关命令的时候,仍会将相关安装包安装在C盘。

    之后一路点击next,直至安装完成。

    1.2 配置npm环境

    为什么我们需要配置环境变量呢?环境变量我们就可以理解为软件的一个快捷方式,方便我们通过命令行的形式来操纵npm完成先关操作,当然如果我们不配置环境变量也完全可以,只不过使用起来不方便。

     依次进行如下操作:右键点击“计算机”,“高级系统设置”,“环境变量”,在这个界面下,在下方的“系统变量”中,找到“PATH”属性,点击编辑,点击新建,将nodejs的安装路径,笔者为:D:\nodejs\ ,添加至系统变量中。点击确定。至此我们的环境变量就配置完成。

    之后我们在桌面搜索栏打开CMD命令行窗口,输入以下命令。

    npm 
    npm -v

    出现以下信息则证明我们的npm安装和配置完成。

     1.3 更改npm资源包安装路径

    到此为止,我们已经完成了npm的安装,由于npm全局模块的存放路径及cache的路径默认是放在C盘下,这样肯定会增加C盘的负担,使用npm install vue 等相关命令是,总是会将要安装的包安装到C盘,而我们希望的是将这些包统一安装到我们刚才创建的nodejs文件夹下面,方便管理。

    这时候我们需要更改安装路径,在安装完npm后,在:C:\Users\PC 路径下,会出现一个名为

    .npmrc的文件,我们打开它,将里面的路径改为我们刚刚创建的nodejs文件夹,具体如下:

    我们只需要在刚刚的nojs文件夹中创建一个名为npm_cache的文件夹即可。

    prefix=D:\nodejs
    cache=D:\nodejs\npm_cache
    

     prefix是要安装的包的相关路径,cache是在后续安装过程中产生的缓存,可能会占用很多空间,不过可以直接删掉(笔者已经试验过,没有任何影响)

    补充:如果没有找到这个文件,就在这个路径下面新建.npmrc这个文件,直接输入路径就好。

     1.4 安装vue

    到这一步我们安装vue的前期工作都已经准备好啦(鼓掌)

    依旧使用管理员身份打开CMD,输入:

    npm install -g @vue/cli

     安装成功后,我们继续输入安装配套的webpack打包工具 

    npm install -g webpack

    之后我们在命令行输入

    vue -V

    就证明我们的vue已经安装好了 。

    1.5 安装Hbuilder X 编辑器

    笔者强烈推荐这个编辑器,这是Vue官方教程中配套的编辑器,非常轻量易上手,整个编辑器只有400M大小,而且配合Vue的插件和依赖都可以一键导入,十分方便。

    Hbuilder X官方网站:HBuilderX-高效极客技巧  我们进入下载安装即可。

    1.6 构建第一个Vue项目

    我们依旧是打开命令行  输入 

    vue ui

    之后在浏览器界面会弹出vue 的图形化管理界面,如果没有自动打开,只需要将上述网址手动输入进浏览器即可。

     打开界面长这个样子(笔者已经新建了一个项目),我们首先新建一个文件夹存放我们的项目路径,之后点击下方的创建新项目。(笔者的路径为:E:\Hbuilder project)

     

     之后我们需要大概等待1~2分钟,等待项目初始化配置完成。在命令行窗口中我们可以看到安装的过程,安装结束后,界面会跳转到欢迎界面。可以看到左上角名为:test的项目我们已经创建好了。

    1.7 将项目部署到本地浏览器运行

    接下来我们需要将项目运行起来!

    首先我们打开HbuilderX编辑器,将刚才新建的项目test文件夹拖拽至编辑器里,项目导入就完成了,非常的方便快捷。

    之后我们点击:运行->运行到终端-> npm run server

     

    可以看到,项目已经成功的运行在了我们本地服务器的8080端口,我们打开浏览器,将这个网址复制进去:http://localhost:8080/ ,就可以看到项目的欢迎界面,至此我们的Vue部署全过程结束。

    欢迎大家学习和评论区交流,如需转载请注明出处~

    展开全文
  • 首先在解释props和$emit的用法之前,先来明确一下在vue中何为父组件、子组件。 一句话总结:被调用的为子组件,调用者为父组件。举个例子如下所示: 子组件: var vm = new Vue({ el:'#app', methods:{ ...

    1、父组件和子组件 

    首先在解释props和$emit的用法之前,先来明确一下在vue中何为父组件、子组件。

    一句话总结:被调用的为子组件,调用者为父组件。举个例子如下所示:

    子组件:

    	var vm = new Vue({
    		el:'#app',
    		methods:{
    			counter:function(e){
    				console.log(e)
    			}
    		},
    		data:{
    			name:"my name is eve"
    		},
    		
    		components:{
    			mycomponent:{
    				props:{
    					title:String,   
    				},
    				data:function(e){
    					return {
    						counter:5
    					}
    				},
    				/*在自定义的组件模板内部可以通过click事件绑定事件
    				  事件需要写在methods成员里面 */
    
    //这里是子组件
    template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>',
    //这里是子组件
    
    				methods:{
    					
    					mycomponent_click:function(e){
    						this.counter = this.counter+this.counter
    						this.$emit('getcounter',this.counter)
    					},
    					
    				},
    			}
    		}
    
    	})

    在上述代码中,我们自定义了一个名为mycomponent的模板,模板内容为一个button

    template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

    并给定了它的props属性,data属性和methods属性,这个模板后续将会作为自定义组件共其他页面调用。我们再来看父组件:

    <body>
    	<div id = 'app'>
    		<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
    		<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
    	</div>
    </body>

    我们可以看到,在这个页面中,调用了mycomponent组件,因为这里的<mycomponent>标签内的所有内容均称之为父组件。即:父组件和子组件的关系是调用者与被调用者的关系。

    2、props的用法

    对于props的用法可以总结为以下2点:

    1、父组件使用props把数据传给子组件

    2、props只能在子组件内定义,在父组件和子组件内都能使用,通常在父组件中使用props用以修改子组件的值。

    首先,附上完整部分的代码:

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src = "vue.js" type="text/javascript"></script>
    	</head>
    	<body>
    		<div id = 'app'>
    			<!-- 第一行为动态赋值,第二行为静态赋值 -->
    			<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
    			<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
    		</div>
    	</body>
    
    	<script>
    	var vm = new Vue({
    		el:'#app',
    		methods:{
    			counter:function(e){
    				console.log(e)
    			}
    		},
    		data:{
    			name:"my name is eve"
    		},
    		components:{
    			mycomponent:{
    				props:{
    					title:String,  //这样也是可以的
    				},
    				data:function(e){
    					return {
    						counter:5
    					}
    				},
    				template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>',
    				methods:{
    					mycomponent_click:function(e){
    						this.counter = this.counter+this.counter
    						this.$emit('getcounter',this.counter)
    					},
    					
    				},
    			}
    		}
    
    	})
    	</script>

    代码并不难理解,在new Vue()方法中,通过全局注册的方式定义了一个名为mycomponent的自定义模板,作为子组件。在html中,<mycomponent>标签调用了该模板,作为父组件。而props存在的意义就是为了建立起父组件和子组件之间的通信关系(联系)。

    在子组件中定义了名为title的变量,初试类型设置为字符String类型。

    在子组件的模板中,我们使用了这个title的变量,通过{{}}双大括号的形式获取该变量的值(此时此刻该变量为空值,因为刚才只指定了title的类型,没有赋值)

    props:{
    	title:String,  
    },
    template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

    在父组件中,我们使用v-bind:的形式动态修改了title的值,将name变量的值赋给了title,并随后将该值传递至子组件中,在data中,我们设置了name的值为“my name is eve”。运行后可以看到,子组件的title值已经被我们修改为my name is eve。

    <mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
    <mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>

     在props传值的整个过程中,逻辑如下:

    1、子组件中,在props属性下,定义变量,并使用在子组件中。

    2、父组件通过在标签内使用该变量名的方式,(通过v-bind:变量名的方式为动态赋值,直接使用变量名为静态赋值),将值从父组件传递至子组件。

    3、$emit的用法

    对于$emit的用法可以总结为以下2点:

    1、子组件通过$emit的方式,调用父组件中的事件 

    2、$emit函数只能在子组件中使用 

    我们依旧来看这个代码段,在父组件中,通过v-on定义了一个名为getcounter的事件,该事件绑定了一个名为counter的函数,如果该事件被触发,则counter函数被处罚。我们再来看子组件中,通过v-on:click的方式绑定了一个名为mycomponent_click的事件

    <mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
    <mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
    template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

    mycomponent_click:

    mycomponent_click:function(e){
    	this.counter = this.counter+this.counter
    	this.$emit('getcounter',this.counter)
    },

    这里的逻辑是:

    1、当该子组件被点击时,触发mycomponent_click事件,将当前计数器的值加倍。

    2、之后执行$emit函数,会调用父组件中名为getcounter的事件,并将counter的值传过去。

    3、父组件的getcounter事件会被触发,调用counter函数,在控制台打印出接受到的值。

    我们可以看到,当前计数器的值为10,控制台打印的也是10,可以看到已经通过$emit调用了父组件的2021年9月17日12:07:事件并且将值传递了过去。

    欢迎转载,请注明出处~

    展开全文
  • 刚开始学习vuejs,将相关vue环境的搭建步骤整理如下,供新手们参考:第一步:安装node环境要使用vue来开发前端框架,首先要有node环境,所以要先下载安装nodejs,官网下载地址为:http://nodejs.cn/download/若安装...

    刚开始学习vuejs,将相关vue环境的搭建步骤整理如下,供新手们参考:

    第一步:安装node环境

    要使用vue来开发前端框架,首先要有node环境,所以要先下载安装nodejs,官网下载地址为:http://nodejs.cn/download/

    若安装成功,则在命令行输入node -v 会显示node版本


    2.安装npm的淘宝镜像

    node环境安装完成后,自带了包管理器npm,可以通过 npm install 命令安装项目需要的依赖项,不过可能下载速度会比较慢,

    可以安装国内的淘宝镜像,安装命令为: > npm install -g cnpm –registry=https://registry.npm.taobao.org

    以后用到npm的地方直接用cnpm来代替就好了

    3.安装全局vue-cli脚手架

    之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。

    安装方法,在命令行输入 cnpm install -g vue-cli 回车


    安装成功后,在命令行中输入vue,出来vue的信息说明安装成功

    4.初始化项目

    安装完脚手架以后便可以开始创建一个基于webpack的新项目:命令 vue init webpack myfirstVue

    最后的myfirstVue为项目方件夹名

    5.安装项目myfirstVue的环境依赖

    用命令进入到项目文件夹>cd myfirstVue,然后输入cnpm install,安装完成后会发现项目文件夹中会多出一个node_modules的子文件夹,里面就是刚才安装的所有依赖


    6.项目启动运行

    准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入cnpm run dev 回车即可



    项目成功启动后,根据提示“Your application is running here:http://localhost:8080”

    在浏览器地址栏中输入http://localhost:8080会发现默认的模块打开了





    展开全文
  • 上一篇文章讲到vue项目在搭建好后可以通过npm run dev命令可以启动并在浏览器中访问,但这种方式只是启动开发环境,那么怎么将项目发布到生产环境呢?需要以下三个步骤: 1.编译vue项目 操作命令:npm run build ...
  • 本文主要给各位vue新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 vue渲染页面 路径图 index.html App.vue router.js main.js 效果图: 总结 以上...
  • Vue新手入门教程

    2019-07-02 15:22:00
    谈谈我对Vue的理解 vue就是前端上的Java,前端上的C#。有个前端的虚拟DOM引擎,设计理念和Java,C#类似。我们只需要告诉DOM应该显示什么,而不用去操作DOM元素。 如何引用? 下面是一个helloWord,大家运行感受...
  • 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些 但没办法,接下来做微服务架构,前端就用 vue,...v4.0.0 版本的调整后讲解:Vue 新手学习笔记:vue-element-admin 之 入门开发教程(...
  • 搭建环境: 安装 cli 脚手架工具 : ...$ cnpm install -g @vue/cli 2. 创建一个项目 $ vue create antd-demo 创建的时候有需要确认的就按回车,如图: 创建完了运行就可以 $ cnpm run serve
  • vue2.0新手教程

    2019-05-15 20:00:13
    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue...
  • vue新手入门详细教程

    千次阅读 2020-04-19 23:02:55
    vue.js vue.js是一套用于构建用户界面的渐进式框架。 Vue的核心:声明式渲染,组件 Vue功能:模板引擎,组件,路由,状态管理器(管理数据–可伸缩性的),自动化构建。 核心基本语法: 第一步:vue.js引入: // ...
  • 前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,...Vue是一个前端框架,安装了Nodejs后,可以使用Npm命令直接下载vue。 打开cmd窗口,依次输
  • vue-cli新手教程

    2019-02-27 18:53:25
    使用 npm(不知道npm的同学,可以自行百度,或者看我上面 nvm的安装教程 ) 全局安装 webpack,打开命令行工具输入:npm install webpack -g,安装完成之后输入 webpack -v,如果出现相应的版本号,则说明安装成功。...
  • vue2.0 新手教程(一)

    2017-08-15 16:57:00
    下面记录一下新手从0到1的过程,本文“应该”会持续更新 首先安装vue的运行环境node 1、下载Nodejs并安装(下载传送门) 下载安装完了之后到cmd里面运行一下命令 node 看到没,可以node回车之后,可以像...
  • vue教程demo,基础教程,适合入门新手
  • VuePress 新手搭建教程

    千次阅读 2018-11-06 17:31:03
    什么是VuePress? **vuePress是以vue驱动的主题系统的简约静态网站生成工具**
  • vue新手笔记2

    2020-05-12 18:54:02
    vue 新手笔记2 关于vue ui的使用 首先自己选定盘创建项目 到项目列表 然后 添加插件 直接添加安装vue-cli-plugin-element默认设置改一下 再运行依赖添加axios OK 接着就是把项目托管到Github或者码云上 新注册用户...
  • Vue新手入门指南(易懂)

    万次阅读 多人点赞 2021-02-21 20:05:21
    对于一名初入编程的新手来说,JavaScript的语法偏向复杂,选择Vue库可以说是一个较为不错的体验。在很多方面,Vue简化了JavaScrip语法,并且实现数据与视图的双向绑定,达到响应式页面的目的。 1. Vue实例和模板...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,707
精华内容 1,482
关键字:

vue新手教程

vue 订阅