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


Posted in Javascript onJanuary 03, 2017

说明:

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

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

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

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

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

项目搭建具体步骤如下:

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,很实用)

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

注意事项:

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.js系列之项目搭建(1)

总结

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

Javascript 相关文章推荐
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
详解参数传递四种形式
Jul 21 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
jquery实现下拉框多选方法介绍
Jan 03 #Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 #Javascript
详解JavaScript常量定义
Jan 03 #Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 #Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 #Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
You might like
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
php报错502badgateway解决方法
2019/10/11 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python中的装饰器详解
2015/04/13 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
《实心球》教学反思
2016/02/23 职场文书
安全生产协议书
2016/03/22 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android