初学者搭建vue环境

第一步准备工作

node环境安装：

1.1 如果本机没有安装node运行环境，请下载node 安装包进行安装
1.2 如果本机已经安装node的运行换，请更新至最新的node 版本
下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/
一键式傻瓜操作下一步下一步...完成安装

git的环境安装：

为了快乐的使用命令行，我们推荐使用 gitbas，也是因为有的工具需要到github上下载安装，所以推荐安装使用git。
下载地址： https://git-for-windows.githu...
安装完成的显示是:

image.png
看到 Git Bash Here 。说明我们已经安装成功git，下面就是检查我们安装的node是否安装成功：

1.1 鼠标右键打开git bash here窗口，在终端输入 node -v

T430@T430-PC MINGW64 ~/Desktop
$ node -v
v8.11.3
T430@T430-PC MINGW64 ~/Desktop
$

输出版本号，说明我们安装node 环境成功,顺便还可以查看 npm 的 版本号：npm -v

T430@T430-PC MINGW64 ~/Desktop
$ npm -v
4.6.1
T430@T430-PC MINGW64 ~/Desktop
$

第二步正式安装

vue-cli脚手架安装:

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

T430@T430-PC MINGW64 ~/Desktop
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
T430@T430-PC MINGW64 ~/Desktop
$

image.png

恭喜你，你已经成功安装了 cnpm。以后在项目中下载vue的插件以及项目中需要npm的操作的时候，你都可以使用 cnpm 比npm的速度要快多了，
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm
如何更新npm的方法： 可以使用 npm install -g npm 来更新版本
以下操作我还是用npm来演示：

安装vue-cli：npm install vue-cli -g

T430@T430-PC MINGW64 ~/Desktop
$ npm install vue-cli -g

image.png

已经安装成功！！！

第三步验证vue环境

建立一个demo项目

1.1在自己的工作空间中新建一个文件夹（自己任意命名即可，不推荐使用中文命名）
1.2 点击文件夹进入我们的项目目录，右键 Git Bash Here
1.3 初始化项目 vue init webpack vue-demo(vue官网推荐的demo)，一直回车到出现 ：Install vue-router? (Y/n)：

T430@T430-PC MINGW64 /f/vue
$  vue init webpack vue-demo
? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (<***********.com>)
? Author <***********.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)

回车到这一步之后就要让我们自己选择工作空间所需要的东西了。
是否要安装 vue-router 项目中肯定要使用到 所以 y 回车
是否需要 js 语法检测 目前我们不需要 所以 n 回车
是否安装 单元测试工具 目前我们不需要 所以 n 回车
是否需要 端到端测试工具 目前我们不需要 所以 n 回车

$  vue init webpack vue-demo
.
.
.
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

1.4运行我们所创建的项目
进入到我们的项目当中：cd vue-demo ,在执行 npm install（下载本地vue运行环境和一些运行vue所需的包）

T430@T430-PC MINGW64 /f/vue
$ cd vue-demo/
T430@T430-PC MINGW64 /f/vue/vue-demo
$ npm install

image.png

下载安装成功，接下来执行 npm run dev 启动这个项目

T430@T430-PC MINGW64 /f/vue/vue-demo
$ npm run dev
> vue-demo@1.0.0 dev F:\vue\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
.
.
.
Listening at http://localhost:8080

浏览器自动打开

image.png

恭喜，你已经成功安装，并运行起来vue基础项目。

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。