1、环境搭建

1.1、安装node.js

1.2 安装过程很简单,一路“下一步”就可以了。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

1.3 修改npm为淘宝镜像

因为npm的仓库有许多在国外,访问的速度较慢,建议修改成cnpm,换成taobao的镜像。

打开命令行工具,复制如下配置:

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待,安装完成如下图。

不知道为什么我修改镜像时会报这个错误,看到身边的同学修改又没有出现这个问题,所以我查了一下百度,清除了一下缓存,然后再粘贴上去就可以了,或者你们安装的时候不会报这种错误

1.4、安装webpack

安装webpack,打开命令行工具输入:

  1. npm install webpack -g

安装如下:

结果:

安装完成之后输入

  1. webpack -v

如下图,如果出现相应的版本号,则说明安装成功。

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

打开命令行工具输入:然后等待安装完成。因为改了镜像,这里不能再写npm 是写 cnpm

  1. 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和脚手架(入门篇)的更多相关文章

  1. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  2. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  3. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  4. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  5. node.js02 安装Node环境

    安装Node环境 在node.js01中我大概了解了什么是node.js,这次进入起步阶段,首先要安装下Node环境. 开始安装 查看当前Node环境的版本号 win+r输入cmd进入命令行,输入no ...

  6. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  7. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  8. linux 安装 node 环境

    本篇学习的分享主要说在linux 安装 node 环境,个人也是在腾讯云的实验室课程学习的,这里只是个人的一个学习记录, 大家也可以去腾讯的实验室来体验一下,教程十分详细易学. 1 .安装 Node. ...

  9. 阿里云服务器linux系统上 安装node环境

    今天将阿里云服务器重windows系统重置成了linux系统, 点击上面的实例名称,进入到 点击  更换系统盘   选择linux 的centos版本(操作前需要  停止实例) 弄好后,启动实例 下面 ...

随机推荐

  1. application/x-www-form-urlencode/multipart/form-data

    首先我们先认识下今天的application/x-www-form-urlencode/multipart/form-data属性所在的位置 1.form所属 在Form元素的语法中,EncType表 ...

  2. CSP 2019 模板整合

    qwq以下都为9.24后写的模板 namespace IO{ const int S = 1 << 20; char I[S + 1], *Is = I, *It = I, O[S + 1 ...

  3. 一键对centos7.6安装python3环境已经pip3

    1 yum -y install "Development tools" 2 yum -y install zlib-devel bzip2-devel openssl-devel ...

  4. rem与px的相爱相杀

    rem 简介:为元素设定字体大小:相对大小:只相对HTML根元素. 优点:只修改根元素就可以成比例调整所有字体的大小. bug:IE8及更早版本不兼容. hack:多写一个绝对单位px的声明,不兼容版 ...

  5. Magento站点优化方案

    Magento 是一个开源电子商务系统,尤其以扩展性高著称,但是很高的扩展性往往是牺牲了速度为代价的,虽然现在magento为速度提升做了很多工作,但是还是没能达到人们对速度的要求.既然如此还是很自然 ...

  6. Shiro学习(12)与Spring集成

    Shiro的组件都是JavaBean/POJO式的组件,所以非常容易使用spring进行组件管理,可以非常方便的从ini配置迁移到Spring进行管理,且支持JavaSE应用及Web应用的集成. 在示 ...

  7. 模数循环节——cf547A

    campjls讲过模数循环节的问题,今天做cf才做到这类题 h1->a1的长度为len1,a1->a1的长度为cir1 h2->a2的长度为len2,a2->a2的长度为cir ...

  8. NX二次开发-Ufun API Example

    UF公共类型 UF_begin_timer计时函数 https://www.cnblogs.com/nxopen2018/p/10957135.html UF_end_timer计时函数 https: ...

  9. TESTNG听录音笔记

    1. 是什么:有了它可以管理测试用例,做数据驱动,多线程模式下case的鲍旭类型 2. 如何生成testng的xml文件 -- based on Eclipse Eclipse里装上testn插件,指 ...

  10. selenium工作的大概原理

    selenium的原理是什么? selenium的原理涉及到3个部分,分别是 浏览器 driver: 一般我们都会下载driver client: 也就是我们写的代码 client其实并不知道浏览器是 ...