站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

深入浅出了解vue.js的三种安装方式

时间:2021-12-22 [网络编程]作者:fabuyuan 浏览:9 次

本篇文章给大家带来vue.js的三种安装方式,Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,它不仅易于上手,还便于与第三方库或既有项目整合,希望对大家有帮助。

深入浅出了解vue.js的三种安装方式  2

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

下面介绍三种 Vue.js 的安装方法:

1.独立版本

我们可以在Vue.js的网上直接下载vue.js,并在<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!

2.使用CDN方法

  • BootCDN(国内) :https://cdn.bootcss.com/vue/2.2.2/vue.min.js(国内不稳定)
  • unpkghttps://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,如(<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

3.NPM方法

在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件

首先,先列出我们接下来需要的东西:

  • node.js环境(npm包管理器)
  • vue-cli 脚手架构建工具
  • cnpm npm的淘宝镜像

1) 安装node.js

从node.js网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

深入浅出了解vue.js的三种安装方式  2

npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。

深入浅出了解vue.js的三种安装方式  2

到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.

2) 安装cnpm

在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

深入浅出了解vue.js的三种安装方式  2

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像网

3) 安装vue-cli 脚手架构建工具

在命令行中运行命令 npm install -g vue-cli 然后等待安装完成。

通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

首先我们要选择存放项目的位置,然后再用命令行将目录转到选定的目录,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

深入浅出了解vue.js的三种安装方式  2

NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeTest 目录生成该文件夹),如下图。

深入浅出了解vue.js的三种安装方式  2

运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:

深入浅出了解vue.js的三种安装方式  2

接下来,我们去NoteTest目录下去看是否已创建文件:

深入浅出了解vue.js的三种安装方式  2

打开firstApp 项目,项目中的目录如下:

深入浅出了解vue.js的三种安装方式  2

介绍一下目录及其作用:

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目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。

安装项目所需要的依赖:执行 cnpm install (这里可以用cnpm代替npm了)

深入浅出了解vue.js的三种安装方式  2

安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

深入浅出了解vue.js的三种安装方式  2

安装完依赖包资源后,我们就可以运行整个项目了。

运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

深入浅出了解vue.js的三种安装方式  2

项目启动后,在浏览器中输入项目启动后的地址:

深入浅出了解vue.js的三种安装方式  2

在浏览器中会出现vue的logo:

深入浅出了解vue.js的三种安装方式  2

更多编程相关知识,请访问:编程入门!!

以上就是深入浅出了解vue.js的三种安装方式的详细内容,更多请关注站长家园其它相关文章!

本文标签:  vue

转载请注明来源:深入浅出了解vue.js的三种安装方式

本文永久链接地址:https://www.adminjie.com/post/6717.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    • php5.6.31如何编译安装

      php5.6.31如何编译安装

      php5.6.31编译安装的方法:1、添加epel源;2、安装依赖;3、下载并解压php5.6.31;4、修改php-fpm.conf;5、启动php-fpm即...

    • oracle怎样进行空值替换

      oracle怎样进行空值替换

      在oracle中,可利用nvl()函数进行空值替换,该函数用于从两个表达式中返回一个非null值,语法为“nvl(字段值,替换值)”;当字段值的结果为null值...

    • oracle数据库有什么用

      oracle数据库有什么用

      oracle数据库的作用:1、oracle可以按照数据结构来组织、存储和管理数据;2、oracle能够适用于大型、中型和微型计算机的关系数据库管理。本教程操作环...

    热门文章