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 05 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
小学体育教学反思
2014/01/31 职场文书
公司管理建议书范文
2014/03/12 职场文书
大学生作弊检讨书
2014/09/11 职场文书
工作证明英文模板
2014/10/21 职场文书
电气工程师岗位职责
2015/02/12 职场文书
签订劳动合同通知书
2015/04/16 职场文书
可可西里观后感
2015/06/08 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python