Vue.js 安装及配置

环境配置

一. 独立版本

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 -vnpm -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 访问项目。
在这里插入图片描述运行成功后,会看到以下界面,即配置完成。
在这里插入图片描述

发布了9 篇原创文章 · 获赞 26 · 访问量 7453

猜你喜欢

转载自blog.csdn.net/fufu_dclt/article/details/102823848
今日推荐