vue_使用npm搭建vue2.0脚手架开发环境

前言：

　　在使用vue进行开发时需要搭建vue的运行环境，这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境。主要是分为mac和window两个版本，两个环境的搭建都是大同小异。

mac开发环境的搭建：

1.安装Node.js（这个只需要去nodeJS官网下载安装就可以了）

以下的命令都是在终端输入

2.在电脑终端使用命令 node -v 检查版本（检查安装成功）

3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

4.检查版本（检查安装成功） npm -v  cnpm版本要大于3.0

5.安装脚vue脚手架 sudo cnpm install -g vue-cli

6.在【终端】输入cd,将你的目标文件拖到【终端】cd后一定要空格

7.新建vue项目，出现任何提示回车。 sudo vue init webpack

8.在【终端】输入cd ,将你vuedemo文件拖到【终端】

9.【在新建vue项目】执行 sudo cnpm install

10.【在新建vue项目】 sudo cnpm run dev（运行搭建的vue项目，每次想运行项目的时候只需要在对应目录终端输入这个命令就可以了）

这样就搭建好了开发环境

windows开发环境的搭建：

1.安装Node.js（这个只需要去nodeJS官网下载安装就可以了）

以下的命令都是在终端输入

2.安装淘宝npm镜像  npm install -g cnpm --registry=https://registry.npm.taobao.org

3.在电脑终端使用命令 node -v 检查版本（检查安装成功）

4.检查版本（检查安装成功） npm -v  cnpm版本要大于3.0

5.安装脚vue脚手架  cnpm install -g vue-cli

6.创建项目存放文件夹  D:\mywork

7.进入该目录  进入该目录 cd D:\mywork

8.新建vue项目，出现任何提示回车。  vue init webpack vuedemo

9.在【终端】输入cd ,将你vuedemo文件拖到【终端】

10.【在新建vue项目】执行 cnpm install

11.【在新建vue项目】  cnpm run dev（运行搭建的vue项目，每次想运行项目的时候只需要在对应目录终端输入这个命令就可以了）

sum_up:

其实mac和windows的环境搭建都是一样的，只是mac系统前面需要添加sudo 前置指令。感觉自己写了一大坨没用的文字，哈哈。

在搭建开发环境的时候，主要的思路是node.js,npm,webpack的搭建，只要这三者都安装了，再搭建一下脚手架就可以了。其实也没

像中的那么难。node -v,npm -v,webpack -v进行检查就好了，少那个就安装那个。webpack是在安装node的时候，node一起安装了

的。

全局安装webpack:  npm install webpack -g

局部安装webpack：npm install webpack --save-dev

Use ESLint to lint your code? (Y/n) 这一步选no

2019/3/8

node -v / npm -v / cnpm-v

cnpm install npm -g / npm install cnpm -g

cnpm install vue

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可

$ cd my-project
$ cnpm install
$ cnpm run dev

菜鸟教程安装地址