本教程技术重点:怎么 安装 vue.js 安装 vue.js 方法 首先 n

怎么安装vue.js

作者:神秘网友 发布时间:2020-11-23 09:44:37

怎么安装vue.js

安装vue.js的方法:首先从node.js官网下载并安装node;然后在命令行运行命令“npm install -g vue-cli”安装vue-cli脚手架构建工具;最后在项目目录中,运行命令“npm run dev”即可。

怎么安装vue.js

推荐:《vue教程》

  • 该方法适用于所有品牌的电脑。

1.安装node.js
从node.js官网下载并安装node
怎么安装vue.js
1.2.npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
怎么安装vue.js
完成之后,我们就可以用cnpm代替npm来安装依赖包了。

3.安装vue-cli脚手架构建工具
在命令行运行命令npm install -g vue-cli 然后等待安装完成。如下图:

怎么安装vue.js
2.接下来我们开始新建一个文件夹,(在这里我就把创建的NodeDemo文件夹放在E盘了,你也可以选择其他盘符来存放demo)输入md NodeDemo然后按回车键,注意md后面有一个空格。然后可以用dir查看一下文件夹是否创建完成:如下图(我已创建好了)
怎么安装vue.js
在NodeDemo目录下,在命令行中运行命令 vue init webpack firstApp。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeDemo 目录生成该文件夹),
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了如下图:

怎么安装vue.js
接下来,我们去看NodeDemo目录下去看是否已创建文件:
怎么安装vue.js

介绍一下目录及其作用:

build:最终发布的代码的存放位置。

config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

node_modules:npm 加载的项目依赖模块,(整个项目需要的依赖资源)

src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

assets:放置一些图片,如logo等

components:目录里放的是一个组件文件,可以不用。

App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

main.js :项目的核心文件

static:静态资源目录,如图片、字体等。

test:初始测试目录,可删除

.XXXX文件:配置文件。

index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

package.json:项目配置文件。

README.md:项目的说明文件。

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。
(第一次创建vue项目的话 好像node_modules这个依赖包资源就会没有,反正没有的话就cnpm install 安装一下依赖就好了)我这个项目现在创建完就有 node_modules这个依赖包资源文件夹了就不用 再cnpm install 安装依赖包资源。

安装项目所需要的依赖先cd 进入到firstApp文件夹先
怎么安装vue.js
安装完成之后,我们到自己的项目中去看,(如果没有的话)会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
怎么安装vue.js
在浏览器中会出现vue的logo:
怎么安装vue.js

怎么安装vue.js的教程已介绍完毕,更多请关注跳墙网其他文章教程!

怎么安装vue.js相关教程

  1. jquery 怎么下载

    下载jquery的方法:首先使用百度搜索“jQuery”;然后点击进入jQuery网站;最后找到适合开发的版本后进行下载即可。 该方法适用于所有品牌的电脑。 首先,打开您的浏览器,无论是什么浏览器都可以,只要可以连接上网络就行。 推荐:《jquery视频教程》 使用

  2. 怎么用npm卸载vue.js

    用npm卸载vue.js的方法是:通过执行【npm uninstall vue-cli -g】命令来卸载。如果我们要安装最新版本的vue.js,可以执行【npm install -g @vue/cli】命令。 环境: 本文适用于所有品牌的电脑。 解决方法: 运行下面的命令来卸载vue.js: npm uninstall vue-

  3. 什么是vue.js混入

    在vue.js中混入是一种分发Vue组件中可反复使用的功能的方法或计算属性,用途:1、在已写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染;2、用到公用方法时,用混入的方法可以减少代码量,实现代码重用。 该方法适用

  4. css怎么设置粘性定位

    css设置粘性定位的方法:直接在css的选择器中写【position:sticky】就可以了。粘性定位可以被认为是相对定位和固定定位的混合,元素在跨越特定阈值前为相对定位,之后为固定定位。 环境: 本文适用于所有品牌的电脑。 (学习视频分享:css视频教程) 具体方

  5. jquery包怎么导

    导入jquery包的方法:首先打开相应的代码文件;然后在文件开头处通过“script type=text/javascript src=js/jquery-1.10.0.js/script”方式导入jquery即可。 推荐:《jquery视频教程》 该方法适用于所有品牌的电脑。 代码如下: script type=text/javascript

  6. css怎么设置字体阴影

    css设置字体阴影的方法:【text-shadow:3px 3px 3px #00f;】。text-shadow属性应用于阴影文本,语法为【text-shadow: h-shadow v-shadow blur color;】。 环境: 本文适用于所有品牌的电脑。 (学习视频分享:css视频教程) 相关属性: text-shadow 属性应用

  7. 文豆php培训怎么样

    现在市面上的PHP培训机构越来越多,相信大家对某些机构也是比较好奇,这里简单给大家介绍下文豆php培训。 文豆IT培训是文豆集团旗下一家具备专业IT技术实力的技能培训学院,成立于2009年,培训部位于广州海珠区鹭江,靠近地铁8号线鹭江站,交通便利。 文豆IT

  8. 想培训php怎么样

    培训PHP绝对是不会后悔的一个想法!引用鸟高的一句话“php是一门能帮人们高效解决问题,快速实现想法的优秀工具,有什么理由不被大量采用呢?”。所以有市场就有需求,拥有一技之能,走哪都有香饽饽的饭吃! 简单来说,PHP上手快,适合大众口味,而且是web建

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词