正文

vue.js2.0从入门到放弃---入门案例

crossover丶  2022-02-10  643

关键词：

最近，vue.js越来越火。在这样的大浪潮下，我也开始进入vue的学习行列中，在网上也搜了很多教程，按着教程来做，也总会出现这样那样的问题（坑啊，由于网上那些教程都是Vue.js 1.x版本的，现在用Vue.js 的构建工具都已经升级到2.0版本了），经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。。。废话不多说了，把我踩过的坑，在这里跟大家说说，希望对初学者有所帮助。ps：高手请绕道。

既然是入门实例，那肯定从最基础的开始了，希望初学者们耐心看下去。首先，列出来我们需要的东西：

node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像

安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。

安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

技术分享

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

技术分享

OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。

在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在桌面生成该文件夹），如下图。

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

打开firstVue文件夹，项目文件如下所示。

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install ，等待安装。

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，那就可以开屏香槟来庆祝了，恭喜你，项目运行成功了。

今天就到这吧，下次给大家分享进一步的小案例，让大家加深对Vue.js的理解。

转载于http://blog.csdn.net/u013182762/article/details/53021374

《java从入门到放弃》javase入门篇：面向对象语法一(入门版)

前一次简单说明了一下面向对象编程的概念，今天我们就把这些概念通过Java语法来实现，然后看看效果。来看第一个案例：定义女神类，再根据女神类创建三个女神对象，并使用女神对象的属性和方法。第一步：定义女神类（... 查看详情

python爬虫从入门到放弃，含案例分析，超详细讲解(代码片段)

Python爬虫1、认识爬虫1.1、概述网络爬虫（又称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者）按照一定规律，自动地抓取万维网信息的程序或者脚本。1.2、应用场景爬取网页优秀的... 查看详情

深度学习---从入门到放弃优化器(代码片段)

深度学习—从入门到放弃（四）优化器1.案例引入-MNIST手写数字识别现代深度学习优化中的许多核心思想（和技巧）可以在训练MLP以解决图像分类任务的中进行说明。在这里我们使用的是手写数字的MNIST数据集࿰... 查看详情

《java从入门到放弃》文章目录

...，等相关内容都写完后，再按学习顺序来整理。《Java从入门到放弃》入门篇：XMLHttpRequest的基本用法《Java从入门到放弃》入门篇：Struts2的基本访问方《Java从入门到放弃》入门篇：Struts2的基本访查看详情

java从入门到放弃

（1）Java入门变量与注释用户输入if语句java中的循环while 查看详情

vue.js2.0---安装node环境和脚手架(入门篇)

1、环境搭建1.1、安装node.js1.2安装过程很简单，一路“下一步”就可以了。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入node-v，如下图，如果出现相应的版本号，则说明安装成功。 1.3修改npm为淘宝镜像因为n... 查看详情

深度学习:从入门到放弃

https://zhuanlan.zhihu.com/p/22976342 首发于深度学习:从入门到放弃写文章登录 FCN学习:SemanticSegmentation余俊1年前感谢@huangh12 @郑途 @麦田守望者对标签图像生成的研究和讨论，这几天研究了一下，补充如下。-------------------... 查看详情

[资源]深度学习从入门到放弃

Relationship:　　MachineLearning---->DeepLearning　　　　　　　　　　　　　　　　　　　　　　　　　　---->DeepReinforcementLearning[LearningRoadMap]　　　　　　　　　　　　　　ReinforcementLearningPapers:　　DeepLearningPapersReadin 查看详情

vue从入门到放弃(代码片段)

----------------------------------------------------点击这里《专栏目录》查看更多--------------------------------------------------------------------------------------------------------点击这里《专栏目录》查看更多---------------- 查看详情

vue从入门到放弃(代码片段)

积分从入门到放弃

这部分重新从定积分学了1,lnx的导数就是x^(-1)=1/x那么求∫(1/x)dx=ln|x|+C 2,初值问题.就是求∫f(x)dx=F(x)+C求C. 查看详情

凸优化从入门到放弃（目录）

...课程时候的笔记和心得，其中应用篇没有学习。凸优化从入门到放弃00-凸优化引言01-凸集02-凸函数（暂无）03-凸优化问题（暂无）04-对偶（暂无）05-无约束优化算法（暂无）06-等式约束优化算法（暂无）07-内点法(不等式约束优... 查看详情

visualstudioformac从入门到放弃1

MAC 第一步：从微软官网下载：https://www.visualstudio.com/vs/visual-studio-mac/第二步：安装软件过程出现Itwasnotpossibletocompleteanautomaticinstallation.Thismightbeduetoaproblemwithyournetwork,proxyserversoranunsolvablei 查看详情

kubelet从入门到放弃：拓扑管理(上)

<Kubelet从入门到放弃>系列将对Kubelet组件由基础知识到源码进行深入梳理。上一篇zouyee带各位看了CPU管理的相关内容，其中提及拓扑管理，本文将对此进行详细剖析,拓扑管理在Kubernetes1.18时提升为Beta。TopologyManager功能可实现C... 查看详情

初识pytorch：从安装到入门，从入门到放弃(代码片段)

目录PyTorch安装配置安装验证PyTorchPyTorch是Facebook团队于2017年1月发布的一个深度学习框架，虽然晚于TensorFlow，也没有TensorFlow火，但目前已经与TensorFlow奇虎相当。而且PyTorch采用了Python语言的接口，可以说它才是Pytho... 查看详情

观察者模式（从放弃到入门）

观察者模式（从放弃到入门）观察者模式从放弃到入门需求1错误示范需求2观察者模式认识观察者模式需求3Java中自带的观察者模式思考源码ObservableObserver解析一些体会今天分享第二个模式，观察者模式。相信作Android... 查看详情

webpack从入门到放弃之路

公司的中流砥柱要走啦!!!!我要接手这些摊子啦!!!!!硬着头皮上吧!/(ㄒoㄒ)/~~第一部分:webpack使用部分第二部分:自动化部署部分第三部分:前端视频部分tobecontinue… 查看详情