Init.Sun Chengdu.Sichuan

vue2.0学习笔记01

2016-12-03
Init
vue

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开发我们自己的项目了。


Comments