Vue.js安装方法

两种安装方法

1.独立版本

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

2.NPM方法

  • 安装node.js

从node.js官网下载并安装node,安装完之后,打开命令行工具(win+R),输入node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

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

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

  • 安装cnpm

在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功。

完成之后,我们就可以用cnpm代替npm来安装依赖包了。

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

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



创建项目

  1. 首先我们要选择存放项目的位置,然后再用命令行将目录转到选定的目录,用cd 将目录切到该目录下。
  2. 在选定目录下,在命令行中运行命令 vue init webpack firstApp 。(这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中)
  3. 运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功。


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

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

  • 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了)

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

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



运行项目

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

原文地址:https://www.cnblogs.com/andyxiong/p/10362283.html

时间: 2024-10-07 23:50:00

Vue.js安装方法的相关文章

【转】安装Vue.js的方法

安装vue.js的方法 一.简介 Vue.js 是什么 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框

【vue】vue.js安装教程

前提:已安装nodejs--npm  (备注教程  "物理安装"  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项目managerSys中安装npm(基于node.js,利用淘宝npm镜像安装相关依赖) 接上步输入命令:    npm install -g cnpm --registry=https://registry.npm.taobao.org 2)安装全局vue-cli脚手架(用于帮助搭建所需

安装vue.js的方法

一.简介 Vue.js 是什么 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

vue.js安装

官网 Vue.js(读音 /vju/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. vue中两个核心点: 响应的数据绑定: 当数据发生改变->自动更新界面 利用Object.definedProperty中的setter/getter代理数

对Vue.js $watch方法的理解

博主最近对着vue.js的官方教程在自学vue.js,博主自幼愚钝,在教程中真的是好多点都不太理解,接下来要说的这个$watch方法就是其中一个不太理解的点了.咱们先来看一下对于$watch方法在vue.js的API中是怎么解释的吧:观察 Vue 实例变化的一个表达式或计算属性函数.回调函数得到的参数为新值和旧值.表达式只接受监督的键路径.对于更复杂的表达式,用一个函数取代.官方示例: 1 // 键路径 2 vm.$watch('a.b.c', function (newVal, oldVal)

vue.js 安装过程(转载)

一.简介 Vue.js 是什么 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

vue.js 安装

写 一个小小的安装步骤    踩坑过来的 点击.然后安装cnpm.再接着使用文章说明继续安装 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project这时候一路空格 选项.当遇到第一个让你敲 Y/N 的时候 选择Y 后面的统统N 即可 安装 完成后 根据命令来运行吧 $ cd my-project 如果自己更改了目录名字.记得选择自己的目录 $ cnpm

js,vue.js一些方法的总结

push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的元素进行排序(按照字母的先后顺序) splice()对数组进行添加或删除,然后返回被删除的项目 reverse()对数组进行倒序 concat()连接字符串  string.concat('string) slice()可从已有的数组中返回选定的元素    arrayObject .slice(st

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器. Vue.js安装 安装方式有两种: 1.直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告) 2.使用cdn方法引入 3.npm安装 npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs 附上一小段nvm使用的命令: $ n