• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > Vue.js系列之项目搭建(1)

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

作者:向朔1992 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue.js项目实例,vue.js项目,vue.js开源项目,vue.js项目实战,vue.js项目源码等相关知识,向朔1992 希望在学习及工作中可以帮助到您

说明:

我们项目现在用的是: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
</div>

安装模块时安装方法

$ cnpm install [name]
</div>

3.快速学习Vue2.0教程

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

(英)https://vuejs.org/

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

4.安装Vue2.0

$ cnpm install vue
</div>

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

$ cnpm install --global vue-cli
</div>

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

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

7.安装依赖

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

8.运行新创建的vue项目

$ npm run dev
</div>

运行之后会看到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项目,接下来我会通过自己的实际项目操作过程,分享我们是如何完成的。

</div>

您可能想查找下面的文章:

  • vue打包项目后正确显示图片
  • vue.js实现价格格式化的方法
  • vue.js 左侧二级菜单显示与隐藏切换的实例代码
  • Vue.js鼠标悬浮更换图片功能
  • vue.js实现用户评论、登录、注册、及修改信息功能
  • vue.js 初体验之Chrome 插件开发实录
  • 使用 Vue.js 仿百度搜索框的实例代码
  • Vue.js在使用中的一些注意知识点
  • vue调用高德地图实例代码
  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

相关文章

  • 2017-05-30vue.js开发环境安装教程
  • 2017-05-30vue.js表格分页示例
  • 2017-05-30Vue.js 60分钟快速入门教程
  • 2017-05-30使用vue.js实现联动效果的示例代码
  • 2017-05-30Vue.2.0.5过渡效果使用技巧
  • 2017-05-30windows下vue.js开发环境搭建教程
  • 2017-05-30vue2.0开发实践总结之入门篇
  • 2017-05-30vue2.0父子组件及非父子组件之间的通信方法
  • 2017-05-30Vue系列:通过vue-router如何传递参数示例
  • 2017-05-30Vue.js 2.0窥探之Virtual DOM到底是什么?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue.js每天必学之表单控件绑定
    • vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
    • Vue.js基础知识小结
    • Vue表单实例代码
    • 简单理解vue中el、template、replace元素
    • Vue中fragment.js使用方法详解
    • 超全面的vue.js使用总结
    • Vue.js 2.0 和 React、Augular等其他前端框架大比拼
    • VueJs与ReactJS和AngularJS的异同点
    • 最新Vue技术栈开发实战

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有