这里介绍使用git安装,电脑自带命令行依然可以使用进行安装
第一步 node环境安装
1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装
1.2 如果本机已经安装node的运行换,请更新至最新的node 版本
第二步 node环境检测
为了快乐的使用命令行,我们推荐使用 gitbash
1.1 下载git 并安装
安装成功后 右键菜单
我们可以看到 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库 具体看教程