我们在前端学习中,学会了HTML、CSS、JS之后一般会选择学习一些框架,比如Jquery、AngularJs等。这个系列的博文是针对于学习Vue.js的同学展开的。

  1.如何简单地使用Vue.js

  如同以前我们学过的Jquery一样,我们在程序中使用Vue.js时也可以使用直接引用的方法,直接下载并用 <script> 标签引入,Vue.js会被注册为一个全局变量。在这里有一个重要提示:在Vue.js的官网有两个版本,开发版本和生产版本,我们在开发时应用开发版本,遇到常见错误它会给出相应的警告。

  当然,和Jquery一样,Vue.js也可以使用CDN的形式引用在代码当中。在bootcdn网站中直接复制代码粘贴就可以了,简单方便。

  2.vue环境搭建

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

  Vue.js的推荐开发环境为Nodejs。npm:为Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(其网址为http://npm.taobao.org/)。我们使用webpack进行资源的合并和打包以及使用vue-cli进行用户生成Vue工程模板。

  那么,我们着重的讲解一下如何搭建一个合适的环境。

  (1)如何安装Nodejs

  打开Nodejs的官网(https://nodejs.org/en/),我们可以在页面最中间看到Download这个词,选择对应的版本下载即可,建议下载后一个版本。也可以选择下面的Other Downloads下载其他版本和Mac的版本。

  下载完成后,使用傻瓜式安装即可。安装完成后可以先进行下简单的测试安装是否成功了,后面还要进行环境配置。在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口,输入node -v和npm -v即可显示当前安装的版本号,即表示安装成功。新版的Node.js已自带npm,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装以及卸载Node.js需要装的东西。

  (2)安装cnpm

  由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,因此要么FQ要么就使用国内镜像cnpm。打开https://npm.taobao.org/,我们可以了解到这是一个完整npmjs.org 镜像,可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  同样在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待。

  安装完成之后,我们输入cnpm -v检测,当显示下图时为安装成功。

  (3)安装vue-cli

  vue-cli是一种全局脚手架用于帮助搭建所需的模板框架,同理在cmd中输入命令:npm install -g vue-cli。在这一段代码中-g是为了全局使用的意思。与cnpm样,安装完成后会显示一长串的文件,输入 vue -v可以查看vue版本。此时,环境已经基本搭建成功。

  (4)测试,创建第一个Vue.js项目

  在命令行中输入:vue init webpack my-first-demo(项目文件夹名)。

  此处以及以后的设置可以输入,也可以直接按回车和N。

  这样,第一个Vue.js项目就创建完成。打开相应的存储地址就会看到这个文件,我的放在可user/伦伦/的下面。

  通过输入cd  my-first-demo就可以进入目录具体文件夹命令行中输入:cnmp install或者npm install安装依赖包。重新打开路径下的文件夹,我们可以看到文件夹中比之前的文件夹多了一个node_modules文件夹,到此脚手架安装完成。

  5)在命令行中里输入:npm run dev。

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

  这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。此时,任务完成。

vue环境搭建与创建第一个vuejs文件的更多相关文章

  1. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  2. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  3. CodeBlocks环境搭建及创建第一个C++程序

    某业界大牛推荐最佳的途径是从raytracing入门,所以本屌开始学习<Ray Tracing In One Weekend>. 该书是基于C++的.本屌从未学过C++.感觉告诉我,要先搭 ...

  4. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

  5. Cordova 开发环境搭建及创建第一个app

    整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...

  6. Vue环境搭建和项目创建

    目录 vue项目 环境搭建 项目创建 vue项目 环境搭建 node node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城 ...

  7. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  8. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  9. vue--1.环境搭建及创建项目

    转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...

随机推荐

  1. 长宽广州地区DNS

    网络又抽风了,发现时DNS的问题. 打客服电话问到了长宽广州的DNS: 首选:211.162.62.1备用:211.162.62.61

  2. 如何让Windows程序只运行一个程序实例?

    要实现VC++或者MFC只运行一个程序实例,一般采用互斥量来实现,即首先用互斥量封装一个只运行一个程序实例的函数接口: HANDLE hMutex = NULL; void MainDlg::RunS ...

  3. hdu 4504 威威猫系列故事——篮球梦_简单dp

    题目链接 题意:你现在分数为a,对方分数为b,你比赛还有n分钟,每次进攻需要15分钟,现在你先进攻,每次进攻可以得1或2或3,对方每次进攻得一分,问超过对方分数有多少种打法 思路:因为情况太多要用__ ...

  4. Java 泛型在实际开发中的应用

    java泛型是对Java语言的类型系统的一种扩展,泛型的本质就是将所操作的数据类型参数化.下面我会由浅入深地介绍Java的泛型. 一:泛型出现的背景 在java代码里,你会经常发现类似下边的代码: p ...

  5. C# 插入、删除Excel分页符

    引言 对Excel表格设置分页对我们预览.打印文档时是很方便的,特别是一些包含很多复杂数据的.不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥了极大的作用.因 ...

  6. c#+linux+mono+Redis集群(解决无法连接Redis的问题)

    在linux环境中使用mono来执行c#的程序, 在连接redis的时候遇到了无法连接数据库的错误.如下: Unhandled Exception:StackExchange.Redis.RedisC ...

  7. 【调优】kafka性能调优

    主要优化原理和思路 kafka是一个高吞吐量分布式消息系统,并且提供了持久化.其高性能的有两个重要特点: 利用了磁盘连续读写性能远远高于随机读写的特点: 并发,将一个topic拆分多个partitio ...

  8. geoserver 源码介绍

    上一章我们通过实现一个服务对如何扩展GeoServer有了一定的了解,但是,对于为何要这样做并没有说明,本章我们重点来说说GeoServer的结构,下图来自GeoServer官网(希望没有侵权),它很 ...

  9. 设置DatagridView的列头样式

    设置DataGridView.ColumnHeaderDefaultCellStyle的BackColor属性会发现没有效果.这是因为在启动了可视样式的时候,BackColor和ForeColor的值 ...

  10. java GC是何时对什么东西做什么事情

    之前学习了javaGC的原理机制,有了一定的了解,现在做一个整理总结,便于理解记忆,包括三个问题: 1. java GC是什么时候做的? 2. java GC作用的东西是什么? 3. java GC具 ...