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

一、node环境安装

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

下载地址：nodejs en 或者 nodejs

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
+ [email protected]
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

成功：

二、 vue-cli脚手架安装

2.1 切换cnpm

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

# 这里需要进行一些配置，默认回车

配置项参考

cd vue-demo
 
npm install
 
npm run dev

http://localhost:8080/#/

搭建成功