最详细的vue-cli安装教程 &^没有之一 ^& 大神亲测。。╮(￣▽ ￣)╭

这里介绍使用git安装，电脑自带命令行依然可以使用进行安装

第一步 node环境安装

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

1.2 如果本机已经安装node的运行换，请更新至最新的node 版本

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

第二步 node环境检测

为了快乐的使用命令行，我们推荐使用 gitbash

1.1 下载git 并安装

下载地址 https://git-for-windows.githu...

安装成功后 右键菜单

我们可以看到 Gti Bash Here 。说明我们已经安装成功git

1.2 检测node 是否安装成功

右键空白，选择 Gti Bash Here 弹出

1.2.1 在终端输入 node -v

 

如果输出版本号，说明我们安装node 环境成功

随便我们可以查看 npm 的 版本号

可以使用 npm -v

 

 

 

 

第三步 vue-cli脚手架安装

2.1 如果访问外网比较慢，可以使用淘宝的镜像 https://npm.taobao.org/

打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org

回车之后，我就可以可以快乐的用 cnpm 替代 npm

 

看到这样

 

恭喜你，你已经成功安装了 cnpm

但是此后，我们还是使用 npm 来运行命令

2.2 接下来就是重点了 安装vue-cli

npm install vue-cli -g

 

如果你很幸运，那么接下来就是这样的

 

我们成功了

2.3 进入我们的项目目录，右键 Gti Bash Here

cd 到目录

2.4 初始化项目 vue init webpack vue-demo

 

一直回车直到

 

vue-router  !--------路由

是否要安装 vue-router 项目中肯定要使用到 所以 y 回车

ESLint   !------严格模式 （检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具）

是否需要 js 语法检测 目前我们不需要 所以 n 回车

Set up unit tests     ！---------建立单元测试

是否安装 单元测试工具 目前我们不需要 所以 n 回车

Setup e2e tests with Nightwatch    ！-------安装e2e测试与夜视工具

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

 

2.5 进入项目

 cd vue-demo

 

2.6 执行 npm install

如果出现下图，说明安装成功

2.7 接下来执行 npm run dev

默认浏览器会自动打开(   若不打开，请自行键入网址进入  )      ！-------成功。

 

 

补充：

可以自行安装依赖包

例如：安装一个可以引入css静态文件的依赖包（   css-loader  ）

首先进入项目根目录：

cd vue_demo

输入： npm install css-loader

回车

安装结束后就可以在style标签中用import引入即可（    封装css  ）

<style> 

    import './assets/css/public.css'

</style>

 

 

 

npm install axios       ！------ 是vue-resource后出现的Vue请求数据的插件      具体看教程

npm install element-ui    ！--------- 是饿了吗团队提供的一个比较完善的UI库        具体看教程