当前位置: 首页 > 编程日记 > 正文

基于Idea从零搭建一个最简单的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安装

  • 下载地址: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就搭建完成了 。


转载于:https://www.cnblogs.com/DylanZ/p/11094893.html

相关文章:

OpenCV中基于LBP算法的人脸检测测试代码

下面是OpenCV 3.3中基于CascadeClassifier类的LBP算法实现的人脸检测,从结果上看,不如其它开源库效果好,如libfacedetection,可参考 https://blog.csdn.net/fengbingchun/article/details/52964163 #include "funset.hpp&qu…

解决getOutputStream() has already been called for this response[java io流]

getOutputStream() has already been called for this response以上异常出现的原因和解决方法:jsp中出现此错误一般都是在jsp中使用了输出流(如输出图片验证码,文件下载等),没有妥善处理好的原因。具体的原因&#xff…

吴恩达老师深度学习视频课笔记:构建机器学习项目(机器学习策略)(1)

机器学习策略(machine learning strategy):分析机器学习问题的方法。正交化(orthogonalization):要让一个监督机器学习系统很好的工作,一般要确保四件事情,如下图:(1)、首先,你通常必须确保至少系统在训练集…

内行的AI盛会——北京智源大会带你洞见未来!(含日程及限量优惠)

报名请点击「阅读原文」北京国家会议中心2019年10月31日-11月1日www.baai.ac.cn/2019使用优惠码「BAAICSDN」专享7折优惠学生票仅69元,数量有限,先到先得世界AI看中国,中国AI看北京(长按上图或点击「阅读原文」注册参会&#xff0…

微软职位内部推荐-Sr. Dev Lead

微软近期Open的职位:JD如果你想试试这个职位,请跟我联系,我是微软的员工,可以做内部推荐。发你的中英文简历到我的邮箱:Nicholas.lu.mail(at)gmail.com转载于:https://www.cnblogs.com/DotNetNuke/p/3885283.html

吴恩达老师深度学习视频课笔记:构建机器学习项目(机器学习策略)(2)

进行误差分析:可进行人工统计或可同时并行评估几个想法。进行误差分析时,你应该找一组错误例子,可能在你的开发集里或者在你的测试集里,观察错误标记的例子,看看假阳性(false positives)和假阴性(false negatives)&…

3D机器人视觉在仓储物流和工业自动化领域的应用 | AI ProCon 2019

整理 | 夕颜出品 | AI科技大本营(ID:rgznai100)随着深度学习和机器学习的发展,机器人已经走出实验室,越来越多地地应用于各行各业,其中,仓储物流和工业化领域就有许多适合机器人作业的场景环境。人眼的一大…

【转载】gdi+ 内存泄漏

【转载】http://issf.blog.163.com/blog/static/1941290822009111894413472/ 最近用GDI实现了几个自定义控件,但是发现存在内存泄露问题 BOOL CGdiplusBugDlg::OnEraseBkgnd(CDC* pDC) {Image* pImage Image::FromFile(L"E:\\bac.bmp");Graphics g(pDC-&…

ubuntu fctix

感觉ubuntu自在大ibus输入法用起来实在是灰常蛋痛啊,于是乎就换了fcitx输入法(很多人推荐嘛)在安装之前先说一下fcitx输入法吧。1.添加fcitx源(官方的源是旧版,不推荐使用)fcitx的ppa源,内含fcitx和fcitx-config,使用命令sudo ged…

深度学习中的优化简介

深度学习算法在许多情况下都涉及到优化。1. 学习和纯优化有什么不同在大多数机器学习问题中,我们关注某些性能度量P,其定义于测试集上并且可能是不可解的。因此,我们只是间接地优化P。我们系统通过降低代价函数J(θ)来提高P。这一点与纯优化不…

飞凌OK6410开发板移植u-boot官方最新版u-boot-2012.10.tar.bz2

Part0 准备知识 0.1 关键参数说明 0.1.1 开发板说明 OK6410是飞凌公司发布的一款开发板,当前有2个版本,OK6410-A和OK6410-B,我当前使用的是前者;前者也经历过升级,所以有128M ram的和较新的256内存的版本,n…

参数量110亿,附赠750GB数据集,Google提NLP预训练模型T5

整理 | Just,夕颜出品 | AI科技大本营(ID:rgznai100)近日,Google 在最新一篇共有 53 页的论文《Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer》中,提出了一个最新的预训练模型…

Linux之bash编程基本语法

在Linux运维工作中,我们为了提高工作效率通常会用bash编写脚本来完成某工作。今天就来为大家介绍bash的一些常见的基本语法。在讲解bash语法之前首先介绍一下bash。bash环境主要是由解释器来完成的。【解释器】:解释命令:词法分析、语法分析、…

深度学习中的卷积网络简介

卷积网络(convolutional network)也叫做卷积神经网络(convolutional neural network, CNN),是一种专门用来处理具有类似网格结构的数据的神经网络。例如时间序列数据(可以认为是在时间轴上有规律地采样形成的一维网格)和图像数据(可以看作是二维的像素网格)。卷积网…

Windows下搭建PHP开发环境

PHP集成开发环境有很多,如XAMPP、AppServ......只要一键安装就把PHP环境给搭建好了。但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习。所以我还是喜欢手工搭建PHP开发环境,需要哪个模块自己安装就行了&#xff0c…

大数据时代下的新生态、新洞察、新趋势 | 神策 2019 数据驱动大会

10 月 22 日,以“矩•变”为主题的神策 2019 数据驱动大会在北京维景国际大酒店顺利举行,来自全球大数据各大行业的领袖人物聚首北京,融合国际前沿技术与行业实践,深入探讨大数据时代下的新生态、新洞察、新趋势。 大会主题“矩•…

ckedit 文本编辑器

Ckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,其功能完全可以与MS的Word媲美。 用起来也非常方便。下面是本人总结的安装步骤: 第一步,从http://ckeditor.com/download 下载ckeditor文件包 第二步,…

为什么我害怕数据结构学得好的程序员?

我害怕数据结构学得好的程序员,一跟他们讨论技术,我就感觉自己不是程序员,仅仅是在搬砖维持生活。我所拥有的编程技巧是什么?不就是每个程序员都会的,对数据库的增删改查吗?每一个初入职场的程序员都会。但…

Go语言基础介绍

Go是一个开源的编程语言。Go语言被设计成一门应用于搭载Web服务器,存储集群或类似用途的巨型中央服务器的系统编程语言。目前,Go最新发布版本为1.10.Go语言可以运行在Linux、FreeBSD、Mac OS X和Windows系统上。1. 结构:Go语言的基础组成有以…

强制退出WinForm程序之Application.Exit和Environment.Eixt

这几天在做一个把大量Infopath生成的XML数据,进行处理的程序,我用了MDI子窗体,每个窗体包含了各自的功能,如,遍历目录及其子目录检查文件类型并自动生成Sql语句并入库、对Infopath数据的自动检查、对数据中的某些域的替…

Oracle Study之--Oracle等待事件(3)

Oracle Study之--Oracle等待事件(3)Db file parallel read这是一个很容易引起误导的等待事件,实际上这个等待事件和并行操作(比如并行查询,并行DML)没有关系。 这个事件发生在数据库恢复的时候,…

Windows下通过Python 3.x的ctypes调用C接口

在Python中可以通过ctypes来调用动态库中的C接口,具体操作过程如下:1. 使用vs2013创建一个加、减、乘、除的动态库,并对外提供C接口,code内容如下:math_operations.hpp: #ifndef TEST_DLL_1_MATH_OPERATIONS_HPP_ #def…

如何在3天内拿下DigSci大赛的亚军?| DigSci科学数据挖掘大赛

作者 | 朱翔宇(DOTA)来源 | AI算法之心(AIHeartForYou)【导读】本文将基于作者在中国计算机大会方案宣讲PPT中的内容,给出此次比赛的完整方案,主要从赛题理解、建模核心思路、算法核心思想等角度阐述,同时对相关细节进…

如何获得Oracle系统性能统计? Oracle大型数据库系统在AIXUNIX上的实战详解 集中讨论 14...

累计读者的来信中,有若干位同仁谈到Oracle的性能问题。什么叫性能慢?怎么量化性能统计?问题我不一一列出了,下面的文字大部分来自Oracle 英文文档,我认为描述的极为精确,比我说的强。 如果有效地诊断性能问…

百度搜索查询命令——组合型

在百度上搜索一下,就会出现一堆关于查询搜索的命令,比如:site,domain,双引号,减号等等。今日,我简单总结一点组合型命令,希望对大家有帮助。 1、domain命令、减号-和的inurl组合 公式…

Delphi多线程编程中的技巧

1)创建线程 MsgThread : TMsgThread.Create(False) ; //创建并执行线程 MsgThread : TMsgThread.Create(True) ; //创建线程后挂起 constructor Create(CreateSuspended: Boolean); 中的参数CreateSuspended表示创建后是否挂起线程。 (2)设置…

Ubuntu14.04下配置OpenGL及测试代码

ubuntu14.04 64位下,默认是没有安装OpenGL相关依赖库的,若安装,则依次执行如下几条命令即可: $ sudo apt-get update $ sudo apt-get install build-essential $ sudo apt-get install libgl1-mesa-dev $ sudo apt-get install li…

VarGFaceNet:地平线提出轻量级、有效可变组卷积的人脸识别网络

作者 | Mengjia Yan、Mengao Zhao、Zining Xu、Qian Zhang、Guoli Wang、Zhizhong Su译者 | 刘畅编辑 | Jane出品 | AI科技大本营(ID:rgznai100)【导读】为了提高用于人脸识别的轻量级网络的判别和泛化能力,本文提出了一种有效的可…

【TortoiseSVN使用教程】

TortoiseSVN使用教程 TortoiseSVN是一个SVN的客户端 1.Checkout Repository 首 先要Checkout服务器端的Repository,所谓的Checkout就是指获得服务器端指定的Repository。存储的所有文件这个 Checkout和Visual Source Safe的Checkout意义完全不一样&#xff0…

[ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)

继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory、Action Invoker 和异步 Controller 等内容。 本文目录 开篇:示例准备 文章开始之前,我们先来了解一下一个请求的发出到Action方法处…