vue-cli 搭建vue.js环境(node)

 

一、 node环境安装

1.1 如果本机没有安装node运行环境，下载node 安装包进行安装

下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

1.2 如果本机已经安装node的运行换，更新至最新的node 版本  （npm install -g npm）

或

#查看当前node版本
$ node -v
v8.9.4

#清除node.js的cache(不确定有没有必要)
$ sudo npm cache clean -f
Password:
npm WARN using --force I sure hope you know what you are doing.

#安装工具n ，这个工具是专门用来管理node.js版本的
$ sudo npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@2.1.8
added 1 package from 4 contributors in 1.776s

#安装最新版本的node.js
$ sudo n stable
     install : node-v9.8.0
       mkdir : /usr/local/n/versions/node/9.8.0
       fetch : https://nodejs.org/dist/v9.8.0/node-v9.8.0-darwin-x64.tar.gz
######################################################################## 100.0%
   installed : v9.8.0

#再次查看node.js版本
$ node -v
v9.8.0

#查看node的安装路径
$ which node
/usr/local/bin/node

2、查看是否安装成功

 

 

二、 vue-cli脚手架安装

2.1 切换cnpm

如果访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后，我就可以可以快乐的用 cnpm 替代 npm

看到这样

成功安装了 cnpm
但是此后，我们还是使用 npm 来运行命令

2.2  安装vue-cli

简易步骤：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

# 最新稳定版
$ cnpm install vue

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

 

 

是否需要 端到端测试工具 目前我们不需要 所以 n 回车

cd vue-demo

npm install

npm run dev

 

 http://localhost:8080/#/