Vue的入门之安装

vue.js是前端框架中比较热门的,因为工作关系,也加入了浩浩荡荡的学习大潮中,用笔记记录下点滴,便于后面学习查阅!

1 node.js环境的安装包(npm包管理器)

2 vue-cli 脚手架构建工具

3 cnpm npm的淘宝镜像

1安装node.js

官网下载node.js安装node,安装过程简单,傻瓜式一键安装,安装完之后cmd下查看安装版本

node 环境已经安装成功,npm包管理器也有了,有些npm的资源被屏蔽或者是国外的资源原因,会导致npm安装依赖的时候会失败或者比较慢,可以用npm国内镜像---cnpm

安装 cnpm

在命令行输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图

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

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

在命令行输入命令 npm install -g vue-cli   等待安装

用vue-cli构建项目

要创建项目首先要选定项目目录,在命令行中把目录选定在指定目录,存放新建的项目。比如项目就放在桌面上

在桌面目录下,运行命令  vue init webpack firstVue,这个命令是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于

webpack的,firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录下

打开文件夹,目录结构是这样的

这就是整个项目的目录结构,其中,主要在  src   目录中做修改,这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图

安装项目所需要的依赖

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装

安装完之后,会在项目目录firstVue文件夹下多一个node_modules文件夹,这里是项目需要的依赖包资源

安装完之后,就可以运行整个项目了。

运行项目

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

这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

时间: 2024-08-29 17:22:11

Vue的入门之安装的相关文章

2.vue.js 入门环境搭建

原文链接:http://blog.csdn.net/luckylqh/article/details/52863026?locationNum=2&fps=1 vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue.js 入门指南之“前传”

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

vue+webpack入门讲解

前言 用vue和webpack实现应该Todo项目,同时对构建过程进行一下小结.参考文档见文末的 Reference. 一.关于包和npm 1 npm 简单来讲,就是 函数--模块脚本--包--库的组成关系,我们开发时,需要引入其他人的第3方包,自己在html文档里一个一个引入太麻烦,所以需要一个集合了很多第3方功能的管理工具,即npm.此外,npm 是依附于 node.js 的. 2 package.json文件 它的作用是: 作为一个描述文件,描述了你的项目依赖哪些包 允许我们使用 "语义化

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

HBase入门之安装测试过程(Local Filesystem)

目    标:学习Hbase,实现在本地文件系统中中安装Hbase 参考资料:apache官方文档,Hbase Quick Start 环    境:MacOS上运行虚拟机,虚拟机中操作系统为CentOS 安装过程: 1.安装JDK,本次安装过程中使用的JDK版本是jdk1.8.下载JDK后,执行默认安装: 2.下载HBase(http://mirror.esocc.com/apache/hbase/hbase-0.98.3/),本次安装过程中下载的Hbase版本为0.98.3: 3.解压下载文

Vue.js学习之——安装

Vue.js的安装方式有三种: 1.script引入 2.CDN 3.NPM 前两种不细说,重点讨论第三种--NPM安装 Vue.js提供了一个名为Vue-cli的官方命令工具,使用之前先进行如下准备工作: 1.安装nvm(Node Version Manager),简单来说就是一个管理node.js版本的控制器. 2.安装npm(Node package Manager),实际上就是个node包管理器.事实上在通过nvm安装node的时候,npm就已经附带了. 完成上述准备之后可以安装Vue了

Cassandra入门指南--安装及配置

Cassandra入门指南--安装及配置 cassandra安装配置

第七节 VMware View 6.0 菜鸟入门 Composer 安装和部署

第七节 VMware View 6.0 菜鸟入门 Composer 安装和部署 一.创建ComposerDB 数据库 在vc虚拟机中的数据库创建ComposerDB 创建ODBC,打开开始菜单--->管理工具---->数据源(ODBC) 二.安装View -Composer 软件 下载VMware-viewcomposer-6.0.1-2078421.exe 软件 输入域管理员的账户和密码 安装完后重启计算机