Vue.js学习笔记—从安装Node.js、cnpm镜像、webpack打包工具、vue-cli脚手架到新建打开项目

Window 上安装Node.js

官网下载：https://nodejs.org/en/

根据选择下载

​

开始安装node.js

点击运行

 ​

​

​

​

​

安装成功！

版本测试

Cmd命令

检查是否配置环境！

输入：path

​

查看node版本

输入：node --version

​

查看npm版本

输入npm -v

​

 

2、安装cnpm镜像、webpack打包工具、vue-cli脚手架

什么是cnpm?

了解cnpm先了解npm

npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）, NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，它是 Node 得到成功的重要缘由之一

由于npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，因此感谢淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你能够用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽可能与官方服务同步。简而言之就是使用cnpm加快下载安装速度！详情了解淘宝镜像：https://npm.taobao.org/

安装cnpm镜像

因为npm有些资源被屏蔽或者是国外资源的缘由，常常会致使用npm安装依赖包的时候失败，全部我还须要npm的国内镜像---cnpm

输入： npm install -g cnpm --registry=http://registry.npm.taobao.org

​

 

安装webpack打包工具

输入：npm install webpack -g

​

 

安装全局vue-cli脚手架

cnpm install vue-cli -g

​

过程会耗时十几秒，等跑完就能够了！

好了，到此说明整个环境就搭建好了,说明安装完成。

2、新建Vue项目

建立Vue工做目录

搭建完手脚架以后，咱们开始建一个新项目，通常状况下！咱们不建议把项目目录放在C盘，由于vue的文件比较大。

习惯会在其余盘，常见一个工做空间目录，易于管理！

如：我在E盘建立一个文件夹叫：Vue-WorkSpace     而后在当前目录下打开命令窗口！

两种方法进入命令台

手动键入方法：

键盘按Win+R； 输入cmd   跳出命令窗口：

​

而后改盘到工做目录，

输入：E:

再输入：cd E:/Vue-WorkSpace

​

Shift鼠标右键快捷方法：

进入Vue-WorkSpace目录！按住键盘Shift键(记住是按住)，点击鼠标右键!

点击：在此处打开Powershell窗口

​

就会跳出命令窗口（这里是Win10的Windows PowerShell）

​

开始建立Vue项目

输入命令：vue init webpack my-first-project   

// my-first-project至关于项目文件夹能够自定义，是基于webpack的项目。

输入后回车！能够看下内存！前五个直接能够Yes，三个NO（这三个暂时NO，否则会提示不少警告），看图！

​

完成以后，在工做目录就有新建了一个文件夹

​

3、打开Vue项目

无论是接到新的Vue项目Demo，仍是打开一个Vue项目，如下操做都是通用的！

进入项目文件夹

当Vue环境安装完后！需命令进入Vue项目文件夹（即my-first-project文件夹内）！

输入： cd my-first-project

回车进入新建的项目。

​

在项目里安装依赖

由于各个模板之间都是相互依赖的，因此如今咱们要安装依赖，在项目目录下里输入如下命令。

输入：cnpm install

​

运行项目

一切环境依赖安装准备就绪，咱们就能够打开测试一下本身新建的vue项目的运行状况，

输入：cnpm run dev  

直接回车。就能够在浏览器访问地址，默认为localhost:8080。

​

在浏览器输入localhost:8080，运行项目

直接在浏览器输入localhost:8080就能够打开默认的模板；如图：

​

到此为止，vue开发环境搭建完毕。