vuejs是一套构建用户界面的渐进式框架。vue指南能使我们快速的掌握vue的使用,比起ng来说更容易上手。博主在学习的过程中也踩了一些坑,现在整理下来方便后期查阅。
node的安装
在node官网上下载最新版本(目前是v6.9.1LTS)的安装文件安装到系统,在安装的时候需要注意是否添加到了环境变量,默认是添加的。nodejs安装及环境配置
npm包管理器
安装好node之后,我们在cmd中查看node的版本:
node -v
能够查看到node版本说明已经安装成功。在新版本的node中会自动安装npm包管理器(自从用了它之后就离不开了),在cmd中查看npm的版本情况:
npm -v
能够查看到npm版本说明已经安装。
加快npm下载速度方法:
为了更好的使用npm包管理器,博主推荐将npm的镜像设置成国内的,速度会快很多。^.^
1.直接使用cnpm这个命令(博主属于强迫症患者,必须使用npm心里才舒坦,见方法二)。
2.切换镜像,设置方法:
首先使用npm安装nrm(npm registry管理工具 nrm,能够查看和切换当前使用的registry)
npm install nrm -g
安装完成之后,查看registry
nrm ls
设置镜像为taobao,
nrm use taobao
这个时候你会看到提示:Registry has been set to: https://registry.npm.taobao.org/,说明设置成功。
webpack安装
因为在构建vue的时候需要使用到构建工具,我这里使用webpack,当然你也可以使用其他的方式构建。
使用npm安装webpack到全局
npm install webpack -g
-g则代表安装到全局。
vue-cli安装
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
npm install vue-cli -g
安装好vue-cli之后我们就可以使用官方提供的脚手架来新建我们的项目了。
使用vue-cli创建第一个项目
在完成了上面的环境搭建的工作之后,我们就可以使用vue-cli来创建我们的第一个项目了。 首先打开cmd,进入项目根目录
cd d:
d:
使用webpack创建模板:
vue init webpack my-first-project
这里它会自动下载vue的模板,可以看到提升它默认是下载vue2.0的模板
This will install Vue 2.x version of template.
For Vue 1.x use: vue init webpack#1.0 my-first-project
下好之后它会提示我们输入项目的一下相关内容,按照提示一步一步的填写就行了:
project name 项目名称
Project description 项目描述
author 作者
Use ESLint to lint your code? 是否使用eslint检测代码
Setup unit tests with Karma + Mocha 建立karma单元测试
Setup e2e tests with Nightwatch 建立Nightwatch自动化测试
填写好上面的内容之后这个项目就下载好了,我们可以看到提示:
vue-cli · Generated "my-first-project".
To get started:
cd my-first-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
然后进入我们的项目文件夹:
cd my-first-project
通过npm install命令来下载以来的包
npm install
下载好了之后使用npm run dev跑起来
npm run dev
不出意外会打开浏览器,看到项目。
博主在运行的时候打开了其他的项目,占用了8080端口,导致项目没跑起来,这里需要大家注意一下,可以通过修改config/index.js的配置文件来修改端口号。
IDE推荐
这里我推荐大家使用vscode这款ide做为开发vue的工具,里面的提供了很多vue相关的插件,麻麻再也不用担心vue文件没高亮显示了。而且里面有个在命令提示符中打开,或使用 ctrl+` 来打开cmd终端非常方便。
End
这样我们的项目就能顺畅的跑起来了。
这里我们通过配置node webpack等和使用vue-cli快速构建了一个项目,让它跑了起来,接下来就可以使用vue开发我们自己的项目了。