【转】世上最简单的vue教程

一、需要了解的基本知识


  • node.js

Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。

  • npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

  • webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

  • vue2

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件系统和vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定,从而使html值变化时可以同步修改js对象,js对象值变化时可以在页面暂时,使开发从复杂的document操作中解脱出来。

  • iview

一套基于 Vue.js 的高质量 UI 组件库,通过iveiw可以快速的开发出风格一致的前端界面。


二、node.js安装

下载完成后安装(直接按默认方式安装就行)

打开cmd 输入下面的命令查看是否成功安装
node -v
npm -v

三、搭建项目

1 .打开idea,新建项目
Create New Project > Static Web>填写project name和选择保存的工作空间>Finish

 

3.png

2.安装vue脚手架工具

  • 首先安装npm的淘宝镜像(下载速度比较快),打开idea的Terminal

     

     

    输入以下的命令

npm i -g cnpm --registry=https://registry.npm.taobao.org

  • 等待下载完成以后,继续安装vue的脚手架工具,在Terminal内继续输入以下命令

npm i -g vue-cli
测试是否安装成功:
vue -V

  • 脚手架安装完成后,初始化包结构,继续输入

vue init webpack demo

  • demo为你前面新建的项目名。初始化会进行设置。可参考此处设置。

  • 初始化完成后。依次在Terminal输入图片内的黄色文字

     

  • 完成后,会提示在哪个端口可以访问,此处现在是8080

     

  • 打开浏览器输入:localhost:8080,出现以下画面,简单的demo就搭建完成了 。

     

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/436954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工程师学乐理(一)尝试理解音乐

前言 很早就接触了乐理,但是一直没有学懂,越学问题越多。个人感觉,其中很大的原因是有关教材写得看不懂,用未知的东西描述未知的东西,不知所云。前几年还买了一把吉他,买了课程,断断续续学了几…

【转】Vue.js入门教程(一)从静态页面到前后端分离开发

第一章:基础知识 我能看懂吗? 只要你现在能用htmlcssjs制作一个静态页面,相信我,你100%可以读懂这篇文章。 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的前端人员。 回想一下&#xf…

vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记

前言覆盖物的最高级就是自定义覆盖物,而往往业务中就必须用自定义覆盖物,因为都用上了地图这么吊的组件了,覆盖物也必须华丽、高度定制。官网Github自定义覆盖物手册效果效果核心其实是三角箭头的阴影,其他都很好说。说起三角的阴…

工程师学乐理(二)音阶及倾向性

前言 阅读本文前,请先阅读《写给理工科人看的乐理》。 本文主要讲音阶。在其他地方能查到的细节,我们这里就不会多说了。本文重点在于梳理音阶背后的逻辑,尝试把技术点串起来讲。 没有逻辑的东西是咱们工程师比较讨厌的,任何大自…

【转】VS工具:实时可视化树

VisuaStudio号称全宇宙最强大的IDE。在VS2015版本中,微软又给广大开发者带来了一个强大的工具:实时可视化树(Live Visual Tree,以下简称可视树)。其实树可视化工具并不是新鲜的东西,在WPF的时候就有了,只是这次微软集成…

cad2014点击工具栏闪退_cad2012闪退,点工具栏闪退但用快捷键画图不闪退

2017-08-10 回答cad快捷键l直线;pl多段线;u回车ctrlz后退;d修改,调整;rec矩形;c圆;tr修剪;o偏移;xl放射线;x分解;co复制;m移动&#x…

工程师学乐理(三)音程调式与和弦

前言 阅读本文前,请先阅读《写给理工科人看的乐理》。 上一篇我们讲了音阶及其倾向性,主要是为了领悟其中的逻辑与原理,限于篇幅,只是点到为止,没有展开讲解。本篇我们将更加深入地去研究音阶间的关系,即…

【转】WPF 入门《常用控件》

1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素。如: StackPanel面板 1 2 3 4 5 6 7 <GroupBox Header"select number?"> <StackPanel> <RadioButton>one</RadioButton> <RadioButton>two</…

python输入直角三角形a、b、输出斜边c_编写一个程序,输入直角三角形两条直角边a和b的长度,利用勾股定理计算斜边c的长度。要求结果保留2位...

你好&#xff0c;我们采用C的计算机语言&#xff0c;让用户输入两条边长&#xff0c;计算出第三边长度&#xff0c;并控制两位小数点输出。以下是程序&#xff1b;#include #include #include using namespace std;int main(){double a, b, c;cout << "请输入边长a;…

代码生成工具 AutoCode For XML发布

AutoCode For XML 介绍 软件名称&#xff1a;XML设计及解析代码生成工具软件。 此软件用于辅助程序开发人员进行图形化XML设计&#xff0c;并提供针对目标编程语言&#xff0c;自动生成XML解析代码的功能&#xff0c;实现设计即编码&#xff0c;减轻开发者负担。 很多实际项…

【转】wpf从我炫系列1----布局控件的使用(上)

今天我来给大家讲解在学习WPF过程中使用布局控件的一些心得&#xff0c;主要给大家介绍一下一个控件的用法。希望对大家学习Wpf有所帮助. 1. StackPanel栈面板 2. WrapPanel环绕面板 3. DockPanel停靠面板 4. Grid网格 5. UniformGrid均布网…

idea中project sdk_一文秒懂IDEA中每天都在用的Project Structure知识

Idea这款开发工具的便利之一是很多配置项几乎可直接使用默认项。但针对不同的项目难免需要针对性的配置&#xff0c;本文带大家详细的梳理一遍Project Structure中各项功能&#xff0c;注意收藏&#xff0c;以备不时之需。先说一下写本文的缘由&#xff0c;在项目中用Idea中打开…

【开源项目】EasyCmd命令图形化软件

EasyCmd 项目地址&#xff1a;https://gitee.com/showmework/EasyCmd 最新版本&#xff1a;v0.2预览版 介绍 命令行图形化。 让命令行更易于使用&#xff0c;从命令行复杂的参数及语法中解放出来。 设计思想 软件设计思想并不是构建用户界面&#xff0c;现代操作系统已经…

php在线读取pdf文件大小_PDF转WORD在线转换器哪家强?

无论是工作还是日常生活中&#xff0c;经常需要将pdf转换成word文档进行编辑&#xff0c;我想大部分人一定是和我一样&#xff0c;首先会去找度娘帮忙&#xff0c;百度一下“pdf转word”出现了很多在线转换器&#xff0c;比如大家常用的讯捷、smallpdf等&#xff0c;然后立马进…

【转】wpf从我炫系列2----布局控件的使用(下)

4. GRID控件 Grid控件可以是说是wpf中功能最强大和使用最多的控件。它有点类似于HMTL网页布局中的表格&#xff0c;可以自定义行列显示&#xff0c;并可以合并某些行和列. 使用<Grid.RowDefinitions>可以定义GRID中的行数&#xff0c; 使用<Grid.ColumnDefi…

ios开发问题汇总(一)

教程汇总 IOS比较好的网络教程&#xff1a;IOS编程浅蓝教程IOS编程教程&#xff08;五&#xff09;自定义UITableView的表单元格菜鸟教程-iOS教程 开发问题 实现页面切换&#xff0c;网上某些文章写的是&#xff1a; [self.navigationController performSegueWithIdentifie…

oracle 建分区索引_Oracle分区表及分区索引-创建list分区

Oracle分区表及分区索引-创建list分区创建list分区的语法如上&#xff0c;需要我们指定的:lcolumn:分区依赖列(注意&#xff1a;只能是一个);lpartition:分区名称;lliteral:分区对应值(注意&#xff1a;每个分区可以对应多个值);l tablespace_clause:分区的存储属性&#xff0c…

【转】WPF从我炫系列3---内容控件的用法

今天我来给大家讲解WPF中内容控件的用法&#xff0c;在WPF中的内容控件&#xff0c;通俗的讲&#xff0c;是指具有Content属性的控件&#xff0c;在content属性里面可以嵌套放置任意其他类型的控件&#xff0c;但是Content只能接受单个元素&#xff0c;可以通过布局控件来组合放…

【iOS开发】添加评分功能

问题 openURL无法跳转到App store 报错 &#xff1a;Failed to open URL itms://itunes.apple.com/us/app/apple-store/idxxxxx 使用canOpenURL时&#xff0c;打印出了错误原因&#xff1a;error: “This app is not allowed to query for scheme itms”&#xff0c;显然是配置…

android 键盘遮盖输入框_Android各种键盘挡住输入框解决办法

原标题&#xff1a;Android各种键盘挡住输入框解决办法今日科技快讯C919大型客机首飞成功&#xff0c;让很多人激动不已。然而近日网上也出现了一些不同的声音&#xff1a;说这架飞机许多部件都是进口货&#xff0c;甚至有人说C919中国人只是造了个壳子。对此&#xff0c;业内人…