【转】世上最简单的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 是 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安装

下载地址：https://nodejs.org/en/download/。

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

打开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就搭建完成了。

【转】世上最简单的vue教程相关推荐

Symfony Vue 教程
Symfony Vue 教程展示了如何使用 Vue 前端创建一个简单的 Symfony 应用. Symfony Symfony 是一组可重用的 PHP 组件和一个用于 Web 项目的 PHP 框架. ...
ChatGPT AI生成的VUE教程博客大纲
以下内容为AI生成 , 仅供参考学习 Vue教程博客的大纲 1. Vue.js 简介:了解 Vue.js 的概念和特点 2. 安装和配置:如何在你的项目中使用 Vue.js 3.Vue 模板语法:学习 ...
vue教程——13 Vuex
vue教程--13 Vuex 一什么是Vuex? 二 vuex核心组成模块三 vuex初体验四 getter用法----------怎么获取state中的值呢?(B组件怎么获取并监听state的 ...
VUE教程（持续更新中）
VUE教程目录 1. VUE简介 1-1. 技术发展的过程: 2. 使用VUE框架 2-1. 构建你的第一个VUE程序 2-2.VUE核心原理 2-3. VUE组件 2-4. 工程结构 1. VUE ...
Vue教程第一篇基础
从接触学习到项目应用,大大小小的vue项目也做了好几个,近期应公司要求需要培训下vue,于是便开始写vue教程的连载博客,网上有很多关于vue学习的教程,我在这里也只是记录下整个vue的学习心得和比较 ...
Vue教程_基础(一)
目录章节地址 Vue教程_tips https://blog.csdn.net/weixin_46349544/article/details/124082287 Vue教程_基础(一) http ...
asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程...
最近在学习张善友老师的NanoFabric 框架的时了解到Exceptionless : https://exceptionless.com/ !因此学习了一下这个开源框架!下面对Exceptionl ...
史上最简单的 SpringCloud 教程｜第一篇：服务的注册与发现（Eureka）
最新Finchley版本请访问: https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f1-eureka/ 或者 http://blog.csd ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...

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

一、需要了解的基本知识

node.js

npm

webpack

vue2

iview

二、node.js安装

下载地址：https://nodejs.org/en/download/。

三、搭建项目

【转】世上最简单的vue教程相关推荐

最新文章

热门文章