vue.js开发环境搭建

环境准备

  • Node.js Javascript的运行时环境
  • npm Node.js下的包管理工具
  • webpack 前端资源模块化管理和打包工具
  • vue-cli 脚手架构建工具
  • cnpm npm的淘宝镜像
    Vue.js安装
  1. Node.js的安装非常容易,首先从官网下载你所需操作系统的版本,然后一直下一步就ok,这里贴个菜鸟教程的传送门。
    安装完成之后,在命令行敲出node -v,如果出现对应版本号,则表示安装成功。
    在这里插入图片描述
  2. npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功。
    在这里插入图片描述
    npm包管理器虽然有了,但是由于npm下载需要依赖包的服务器地址在国外,导致很多资源访问会很慢。所以我们可以安装淘宝的国内镜像。
  3. 在命令行敲出 npm install -g cnpm --registry=http://registry.npm.taobao.org。
    这样就可以使用 cnpm 命令来安装模块了:
    cnpm install [name]
  1. 安装webpack
    cnpm install webpack -g
  1. 安装vue脚手架
     npm install vue-cli -g

初始化一个Vue.js环境
在电脑上新建一个文件夹用来存放我们的代码。然后使用命令行进入这个文件夹cd 目录路径。
之后使用命令

    vue init webpack name

来初始化一个vue环境,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。在安装过程会有一些初始化的设置,我们可以采用默认配置,一路回车 。
在这里插入图片描述
从上图的我们还可以看到vue很贴心的告诉了我们快速开始(To get started)的命令
安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。

npm install

不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)

cnpm install

安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

启动项目

npm run dev

运行成功以后他会告诉你ip和端口号
在这里插入图片描述
访问这个地址
在这里插入图片描述
如果出现上图。恭喜你,已经可以开始Vue.js之旅了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249910.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql数据库删除一条数据后还想让新增数据从空缺id处开始

方法1: truncate table 你的表名 //这样不但将数据全部删除,而且重新定位自增的字段 方法2: delete from 你的表名 dbcc checkident(你的表名,reseed,0) //重新定位自增的字段,让它从1开始 方法3: 如果你要保存你的数…

Object相关方法

const object1 {a: somestring,b: 42,c: false };console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false]该Object.values()方法返回给定对象自己的可枚举属性值的数组,其顺序与for...in循环提供的顺序相同&#xf…

用Itextsharp 组件导出PDF 的文档的方法

Itextsharp 是一个很强大,开源的,轻量级的 PDF 生成组件,官方网上好像没有相应的API 说明文档,以下是在工作中使用的心得与体会,并附上源码,功能包含了pdf 的创建,table 的创建, 图片…

正则基础知识

创建正则表达式 1.使用new来创建 var exp new RegExp(box , gi );g 全局匹配 i 忽略大小写 m 多行匹配2.使用字面量 var exp /box/gi; 直接用2个 / ; 在俩个斜杠后加上模式修饰符; 俩种创建方式比较: 1.使用字面量方式创建用的更加广泛; 2.当要匹配的内容是变量时,…

详解 vue-cli 的打包配置文件代码

一、前言 对于webpack基础不好,node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的,有种无从下手的感觉。然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白。那大多数人就采…

室内定位(一)

转自:http://www.cnblogs.com/rubbninja/ 各种室内定位方法 具体的室内无线定位技术可以这样来分类: 无线设备:WIFI、蓝牙、ZigBee、RFID、UWB、LED、红外线、超声波、麦克风等定位信息:主要是RSS(接收信号强度&#x…

不同浏览器css引入外部字体的方式

/*** 字体后缀和浏览器有关,如下所示* .TTF或.OTF,适用于Firefox 3.5、Safari、Opera * .EOT,适用于Internet Explorer 4.0 * .SVG,适用于Chrome、IPhone * 比如:*/ font-face {font-family: MyFont;/*定义字体名称*/src: url(fon…

Promise实践

var doSomething function() { return new Promise((resolve, reject) > { resolve(返回值); }); };let doSomethingElse function() { return 新的值; }doSomething().then(function () { return doSomethingElse(); }).then(resp > { console.warn(resp); console.wa…

JsonBuilder初出茅庐

互联网这股东风不久前刮到了甘凉国,国王老甘独具慧眼,想赶紧趁着东风未停大力发展移动互联网,因为他笃信布斯雷的理论:“站在风口上,猪都能飞起来”。无奈地方偏僻落后,国内无可用之才啊。老甘一筹莫展的低…

vue-cli 打包部署

1、一般打包 :直接 npm run build。(webpack的文件,根据不同的命令,执行不同的代码的) 注:这种打包的静态文件,只能放在web服务器中的根目录下才能运行。 2、在服务器中 非根目录下 运行的 打包…

EXCEL怎么打20位以上的数字?

EXCEL怎么打20位以上的数字? 转载于:https://www.cnblogs.com/macT/p/10208794.html

vue render函数

Vue中的Render渲染函数 VUE一般使用template来创建HTML&#xff0c;然后在有的时候&#xff0c;我们需要使用javascript来创建html&#xff0c;这时候我们需要使用render函数。比如如下我想要实现如下html&#xff1a; <div id"container"><h1><a hre…

Nexus介绍

转自&#xff1a;https://www.cnblogs.com/wincai/p/5599282.html 开始在使用Maven时&#xff0c;总是会听到nexus这个词&#xff0c;一会儿maven&#xff0c;一会儿nexus&#xff0c;当时很是困惑&#xff0c;nexus是什么呢&#xff0c;为什么它总是和maven一起被提到呢&#…

vue-cli 打包

一项目打包 1 打包的配置在 build/webpack.base.conf.js文件下 常量config在vue/config/index.js 文件下配置&#xff0c;__dirname是定义在项目的全局变量&#xff0c;是当前文件所在项目的文件夹的绝对路径。 2 需要修改vue/config/index.js 文件下的将build对象下的assets…

乘风破浪:LeetCode真题_010_Regular Expression Matching

乘风破浪&#xff1a;LeetCode真题_010_Regular Expression Matching 一、前言 关于正则表达式我们使用得非常多&#xff0c;但是如果让我们自己写一个&#xff0c;却是有非常大的困难的&#xff0c;我们可能想到状态机&#xff0c;确定&#xff0c;非确定状态机确实是一种解决…

python——获取数据类型

在python中&#xff0c;可使用type()和isinstance()内置函数获取数据类型 如&#xff1a; &#xff08;1&#xff09;type()的使用方法&#xff1a;    >>> a 230 >>> type(a) <class str> >>> a 230 …

vue项目工程中npm run dev 到底做了什么

npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后&#xff0c;需要启动整个项目运行&#xff0c;npm run 其实执行了package.json中的script脚本&#xff0c;npm run dev的执行如下 3.底层相当执行webpack-dev-server --inline --progress --confi…

JavaScript回顾与学习——条件语句

一、if...else // if elsevar age 16;if(0 < age && age < 6){console.log("儿童");}else if(6 < age && age < 14){console.log("少年");}else if(14 < age && age < 35){console.log("青年");}els…

bat等大公司常考java多线程面试题

1、说说进程,线程,协程之间的区别 简而言之,进程是程序运行和资源分配的基本单位,一个程序至少有一个进程,一个进程至少有一个线程.进程在执行过程中拥有独立的内存单元,而多个线程共享内存资源,减少切换次数,从而效率更高.线程是进程的一个实体,是cpu调度和分派的基本单位,是比…

webpack.config.js和package.json

webpack.config.js 是webpakc的配置文件&#xff0c;webpack是当今很火的一个打包工具 使用webpack.config.js在你的项目里 可以对你的项目进行模块化打包&#xff0c;并且也可使组件按需加载&#xff0c;还可将图片变成base64格式减少网络请求。 而package.json 是指你项目的…