Vue学习系列---安装

一、前言

  学任何东西都是有理由的,目前主要有Angular,React,Vue这三个前端MVVM框架。我选择vue原因很简单,“”入门简单“”,是的只是这个理由。相较于其他2个框架,vue的文档真的是太亲民的,入门曲线没有那么陡,对于我这种小菜鸟来说,是入门首选。等vue熟悉后,相信再看别的前端MVVM框架也是一通百通的效果。

  目前流行的2套基于vue.js的UI框架element-ui(http://element-cn.eleme.io/#/zh-CN/component/installation)和Iview(https://www.iviewui.com),各有千秋吧,大家可以根据自己的需要选择

二、为什么需要安装

  最简单是一种,直接下载并用 <script> 标签引入,Vue 就会被注册为一个全局变量。但是推荐构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如Webpack或Browserify模块打包器配合使用

三、开发环境

  1.Node.js: javascript运行环境(runtime);

  2.npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/)

  3.webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

  4.vue-cli: Vue-cli是Vue的脚手架工具,主要作用:目录结构、本地调试、代码部署、热加载、单元测试

四、安装Node

  1.从node.js官网下载并安装node(吐槽下,下载了好多遍页面下载好,就用了之前的版本)

  

  win+R,输入cmd,接着输入node -v检测是否安装成功。

  

五、安装npm的国内镜像---cnpm

  在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org

  

  入上图,安装完成。

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

  在命令行中运行命令cnpm install -g vue-cli 安装完成。

  

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

七、用vue-cli构建我们的第一个项目

  首选要选择项目目录 暂时放到桌面。cd desktop

  然后运行命令vue init webpack MyVue这个命令的意思是初始化一个项目,其中webpack是构建工具

  再然后就是编写项目名称,描述,作者等信息等(注意:User EsLint to lint to your code,这个要选NO,该选项为使用ESLint规范你的代码,一个空格错误都将报错,暂时不开启,可以避免不必要的麻烦)

  

  此时,我们桌面上就有了项目文件夹

  

  嗯,结束了么?No! 还得安装依赖包

  

  安装完依赖包之后,就可以运行整个项目了.

八、运行项目

  在项目目录下运行使用npm run dev,便可以打开本地服务器实时查看效果(localhost:8080)

  

  

  这样,整个安装步骤就基本结束了,其实还是很繁琐的,查找了网上很多资料。后面会开始我们vue正式的学习篇章……

  

时间: 2024-07-29 18:58:27

Vue学习系列---安装的相关文章

【Vue 学习系列 - 01】- 环境搭建(Win7)

1. 根据系统下载Node.js 下载地址:http://nodejs.cn/download 2. 安装Node.js 点击安装Node.js,在安装目录D:\Program Files\nodejs\下新建node_global和node_cache两个文件夹 设置global和cache npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program

Vue学习系列(一)——初识Vue.js核心

前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一处需要动态更新的DOM节点创建一个指令对象.每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作.基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升. 因此,数据绑定,组件

Vue学习系列(三)——基本指令

前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位. 而今天,我们将对vue中的基本指令进行了解汇总,指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.

Vue学习系列(四)——理解生命周期和钩子

前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究vue的生命周期. 万物皆有灵,世间万物都拥有灵魂,小到山河湖海,花草树木,蚂蚁到人类,以及所有的动植物,大到地球星空和宇宙,都拥有灵魂,可以说他们都是有生命的,只是他们的生命形态是我们人类所不能理解的存在.在生产中,生命周期通俗来讲,就是从自然中来回到自然中去的全过程,也就是从采集材料设

php优秀框架codeigniter学习系列——安装,配置

下载 可在官网下载,我使用的是CodeIgniter-3.1.7. 目录 打开程序目录,可看到目录结构. 我这里做一点小的修改,新建了一个 index 目录,将 index.php 和一些静态文件放入这个目录里.这样做的主要目的是只将入口文件 index.php 暴露在网站根目录下,而将程序的网站业务文件目录 application 和系统文件目录 system 等其他的文件放在网站根目录外,避免用户可以直接访问到. application --  网站业务文件目录.里面包含有缓存(cache)

Vue学习系列(二)——组件详解

前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. 什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 为什么要用到组件呢? 为了可重用性高,减少重复性开发,让我们可以使用独立可复用的小组件来构建大型应用. 基本 一.组件注册 1.通过Vue.extend()创建,然后由component来

近一周学习之-----vue、webpack安装

1.vue安装 1.1.利用npm install -g vue vue安装完毕 2.webpack安装 npm install webpack -g webpack安装完毕 今天任务大功告成! 接下来利用webpack安装vue脚手架,开始vue学习之旅...

vue学习笔记——简单的介绍以及安装(一)

学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html 1.简单的介绍 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版

hadoop1学习系列2-hadoop伪分布安装

1.hadoop的伪分布安装(采用Host-only模式) 1.1 设置ip地址    1.1.1设置宿主机的VirtualBox Host-only Network网路设置         IP地址:192.168.56.1   子网掩码:255.255.255.0   默认网关:不填  1.1.2设置VirtualBox虚拟机的网路连接   网卡1:启用网路连接   连接方式:仅主机(Host-Only)适配器   高级:保持默认   1.1.3启动linux系统,(使用centos6.4)