DDR爱好者之家

Vue.js系列之项目搭建(1)
站长资源 2024/11/28 佚名
10 1538
DDR爱好者之家 Design By 杰米

说明：

我们项目现在用的是：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项目，接下来我会通过自己的实际项目操作过程，分享我们是如何完成的。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米