vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)
1、环境搭建
1.1、安装node.js
1.2 安装过程很简单,一路“下一步”就可以了。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。
1.3 修改npm为淘宝镜像
因为npm的仓库有许多在国外,访问的速度较慢,建议修改成cnpm,换成taobao的镜像。
打开命令行工具,复制如下配置:
- npm install -g cnpm --registry=https://registry.npm.taobao.org
然后等待,安装完成如下图。
不知道为什么我修改镜像时会报这个错误,看到身边的同学修改又没有出现这个问题,所以我查了一下百度,清除了一下缓存,然后再粘贴上去就可以了,或者你们安装的时候不会报这种错误
1.4、安装webpack
安装webpack,打开命令行工具输入:
- npm install webpack -g
安装如下:
结果:
安装完成之后输入
- webpack -v
如下图,如果出现相应的版本号,则说明安装成功。
2.安装vue-cli脚手架构建工具
打开命令行工具输入:然后等待安装完成。因为改了镜像,这里不能再写npm 是写 cnpm
- cnpm install vue-cli -g
安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
2.1、构建项目
在这里我选择了一种、在硬盘上找一个文件夹放工程用的
2.1、安装vue脚手架输入:vue init webpack myproject,注意这里的“myproject” 是项目的名称可以说是随便的起名,最好不要使用 “中文”,因为涉及到乱码问题。
所以避免不必要的麻烦。
2.2 创建项目时候,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择E来存放新建的项目,则我们需要先把目录cd到盘,如下图。
结果:
完成后的项目目录:
以上的编译成功后可以直接在浏览器中查看项目:
这样就基本完成了。
先学习到这里记录一下自已学习中的东西,加深对Vue.js的理解。
vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)的更多相关文章
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- 基于Vue.js 2.0 + Vuex打造微信项目
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- node.js02 安装Node环境
安装Node环境 在node.js01中我大概了解了什么是node.js,这次进入起步阶段,首先要安装下Node环境. 开始安装 查看当前Node环境的版本号 win+r输入cmd进入命令行,输入no ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- linux 安装 node 环境
本篇学习的分享主要说在linux 安装 node 环境,个人也是在腾讯云的实验室课程学习的,这里只是个人的一个学习记录, 大家也可以去腾讯的实验室来体验一下,教程十分详细易学. 1 .安装 Node. ...
- 阿里云服务器linux系统上 安装node环境
今天将阿里云服务器重windows系统重置成了linux系统, 点击上面的实例名称,进入到 点击 更换系统盘 选择linux 的centos版本(操作前需要 停止实例) 弄好后,启动实例 下面 ...
随机推荐
- koa 的 Context
context上下文对象: 该对象类似原生http中的 req + res - 该对象的req,res属性也存在,就是原生没有包装过的req,res - 简单说: context 对象就是从请求到响应 ...
- 63. (FileInputStream)输入字节流
IO分类: 按照数据流向分类: 输入流 输出流 按照处理的单位划分: 字节流:字节流读取的都是文件中的二进制数据,读取到的 ...
- Mysql学习笔记(002)-基础查询
基础查询 # 进阶1:基础查询 /* 语法: select 查询列表 from 表名: 类似于:system.out.println(打印东西); 特点: 1.查询列表可以是:表中的字段,常量值,表达 ...
- webpack最基本的用法
webpack 安装 webpack是所以Node.js开发的工具,可通过npm安装,首先要保证node已经安装完毕,可以去node官网下载, 然后通过npm下载webpack npm install ...
- 暴力枚举+扫描线+线段树——cf1194E
/*思路就是枚举矩形下面那条先,把所有和其交叉的竖线更新进线段树,然后扫描先向上更新,遇到竖线上端点就在线段树里删掉,遇到横线就更新答案*/#include<bits/stdc++.h> ...
- php 实现的功能
1.php写日志函数 (如:前端请求日志记录) : https://www.cnblogs.com/lvchenfeng/p/6794822.html 2.php中(服务器)使用CURL实现GET和P ...
- websocke和http的区别
同:建立在TCP之上,同http一样通过TCP来传输数据 不同: HTTP协议为单向协议,即浏览器只能向服务器请求资源,服务器才能将数据传送给浏览器,而服务器不能主动向浏览器传递数据.分为长连接和短连 ...
- Java桌球小游戏
版本一.出现窗口package cn.xjion.game;/** * 出现窗口 * @author xjion * */import java.awt.*;import javax.swing.*; ...
- linq中如何合并多个predicate条件
最近在做一个webAPI 的时候遇到一个需要合并多个predicate条件的问题,下面就是对题的情况.为了方便交流我对case进行了简化,请先看如下代码: using System.Collectio ...
- 4种xml解析器区别
XML作用:不同应用之间的通信和数据共享 Dom遍历法:对内存消耗大,容易内存溢出 SAX方法:事件驱动模式,缺点 不易操作,很难同时访问多处不同数据,对内存消耗不大,速度快 jdom方法: dom4 ...