码迷,mamicode.com
首页 > Web开发 > 详细

vue.js 2.0 --- 安装node环境和脚手架(入门篇)

时间:2017-12-28 16:09:27      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:除了   查看   install   乱码问题   family   直接   大写   项目目录   配置   

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环境和脚手架(入门篇)

标签:除了   查看   install   乱码问题   family   直接   大写   项目目录   配置   

原文地址:https://www.cnblogs.com/LCH-M/p/8135825.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!