Vue.javascript系列之项目搭建(1)

很多时候,不快乐不是因为幸福的条件不完整,而是因为生活不容易。一个人只拥有此生此世是不够的,他还应当拥有着诗意的世界。

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。

今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩的,现在项目要上线了,所以记录一些过程。
(这是首页目前的效果图)

项目搭建具体步骤如下:

1.安装node

到官网下载安装,我这里是win7系统。

(中)https://nodejs.org/zh-cn/

(英)https://nodejs.org/en/

2.安装cnpm镜像

(node自带安装了npm,故不再安装)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装模块时安装方法

$ cnpm install [name]

3.快速学习Vue2.0好代码教程

(中)http://cn.vuejs.org/

(英)https://vuejs.org/

你要是觉得这些网站访问速度都比较慢的话可以移步国内开发者自己翻译的网站:https://vuefe.cn/

4.安装Vue2.0

$ cnpm install vue

5.安装vue-cli 脚手架工具

$ cnpm install --global vue-cli

6.在某个目录下,创建一个基于 webpack 模板的新项目

$ vue init webpack my-project
//my-project是你的项目名

7.安装依赖

$ cd my-project  //到项目目录下
$ cnpm install  //安装依赖

8.运行新创建的vue项目

$ npm run dev

运行之后会看到vue的初始页面效果,如下图,说明你就成功搭建了一个vue项目。(下面框出来的是官方提供的插件和awesome,很实用)

注意事项:

1.安装Git(可选)

如果你熟悉或者想要学习了解Git,可以在安装node之前先安装Git,使用Git Bash代替windows的cmd命令面板。如果你用windows的cmd命令行工具,则以上安装命令前的“$”省略。

Git官网:https://git-scm.com/

Git国内好代码教程推荐:http://t.cn/zQ6LFwE

2.不应用ESLint

创建webpack模板项目时,如果你对ES6和ESLint不是很熟的话我个人不建议你应用它,因为要求比较严格,所以一不小心就报错,导致整个项目运行不起来,对于初学很痛苦。

总结

今天主要分享了一下从无到有创建一个vue项目,接下来我会通过自己的实际项目操作过程,分享我们是如何完成的。

到此这篇关于Vue.javascript系列之项目搭建(1)就介绍到这了。青春是春天里的第一抹新绿,突破严冬的萧瑟和荒凉,给人们送来春天的问候;青春是孩子灿烂的笑脸,无拘无束无忧无虑,给人们带来欢乐和活力。更多相关Vue.javascript系列之项目搭建(1)内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明