环境配置
一. 独立版本
Vue.js的独立版本就是在 Vue.js 的官方网站上直接下载 vue.min.js ,并用 script 标签引入。
二. CDN 方法
使用 CDN 方法,远程链接引入,需要连接网络。
Staticfile CDN(国内) :
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg(推荐):
https://unpkg.com/vue/dist/vue.js
cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
三. NPM 方法
NPM方法安装速度较慢,因此不推荐用于日常开发、测试,但在用 Vue.js 构建大型应用时推荐使用 NPM 安装。
Vue.js 提供了一个官方命令行工具,可用于快速搭建大型单页应用。
Vue.js 的推荐开发环境为 Nodejs。
npm:为 Nodejs 下的包管理器。
1. 安装Nodejs
打开 Nodejs 官网 https://nodejs.org/en/。
选择对应的版本下载,这里建议下载后一个的最新版本。
将安装包安装即可。
安装后进行测试检查是否安装成功,在键盘上按下 win + R 键,输入 cmd,然后回车,打开cmd窗口,输入node -v和npm -v显示当前安装的版本号,即表示安装成功。
2. 安装淘宝镜像
可以选择性的安装,由于使用 npm 的官方镜像可能会非常慢,也可能会出现很多问题,这里使用淘宝 NPM 镜像。
http://npm.taobao.org/
输入以下命令。
npm install -g cnpm --registry=http://registry.npm.taobao.org
安装完成之后,输入 cnpm -v 检测版本。
3. 安装脚手架
脚手架帮助我们搭建基本的开发环境,好比架子搭建好了,利用它可以搞定目录结构,本地调试,单元测试,热加载及代码部署等。
输入指令 cnpm install -g vue-cli ,期间若停止可按 enter 键继续运行。
输入 vue -V 可以查看 vue 版本。
这时环境已经基本搭建成功。
4. 创建vue.js项目
建议不要装在c盘,这里我们在 D 盘下创建项目,首先要通过命令行进入 D 盘,输入 d: 进入 D 盘。
接下来,再在 D 盘下创建项目,如果要在某个文件内创建项目的话,需要进入到相应的文件夹内。
输入 vue init webpack my-first-demo 命令,my-first-demo 是自定义的项目名字。
5. 安装依赖
由于各个模板之间都是相互依赖的,所以安装依赖。
进入到创建的项目中 cd my-first-demo ,输入指令 cnpm install 。
6. 安装完成
输入命令 cnpm run dev 启动项目,启动成功后用
http://localhost:8080 访问项目。
运行成功后,会看到以下界面,即配置完成。