基于Idea从零搭建一个最简单的vue项目

news/2024/7/7 15:38:17 标签: 开发工具, javascript, webpack

一、需要了解的基本知识


  • 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可以看做是模块打包机:它做的事情是,分析你的项目结构,找到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


http://www.niftyadmin.cn/n/1412866.html

相关文章

程序员如何写简历(附模板)

背景 对于一个程序员来说,简历很重要。我身边就有这么一个例子。 朋友A和朋友B,都投了一家公司的岗位。 友A简历被拒,用人的项目组认为简历与岗位不匹配。 友B简历经过我修改之后,不但简历过了,还顺利的通过了一二三四…

SSM(四)WebService入门详解

2019独角兽企业重金招聘Python工程师标准>>> 前言 webservice这个不知道大家首次接触的时候是怎么理解的,反正我记得我当时第一次接触这个东西的时候以为又是一个XX框架,觉得还挺高大上。然而这一切在之后我使用过后才发现这些全都是YY。 那…

linux环境下搭建环境

一.安装JDK 1.首先去官网下载linux版本的JDK 2.将下载好的jdk的压缩包放到linux的opt文件夹下 3.解压缩  tar -xzvf jdk-8u211-linux-x64.tar.gz 4.然后再该目录下输入ls查看文件夹就能看见我们熟悉的jdk1.8.0_211文件了 5.修改etc文件夹下面的profile文件,类似于…

让 Angular 1.x 跟上时代的步伐

本篇技术博客来自有着化腐朽为神奇能力的,Worktile 技术牛人Web 总监 徐海峰 大神的分享~满满的干货,你值得拥有!Worktile 的前端构建之路 2013年,那时候 Angular.js 才刚刚兴起,我们大胆了选择了当时看来比较新的技术…

BezierCode 工具使用

概要 今天无意间看到一个视频,发现了一款绘画Bezier 图形绘制并自动生成OC代码的神器, 因此马上先记录下。 之前一直很纠结如果程序员自己去绘制图片,久那么使用bezier 自己去画吗? 答案是:其实这样很不现实的。 点…

elasticsearch7.7安装部署

这里只搭建了一个节点,提供给测试环境使用,暂未考虑ES集群扩容和优化。 ES 7.0 是 2019 年 4 月份发布的,底层是 Lucene 8.0。其他重要特性有: 废除单个索引下多 Type 的支持 ES Security 免费使用 ECK - ES Operator on K8s 新功…

整合梅花雨日历控件,推出.NET版本

转 http://www.cnblogs.com/PiedPiper/archive/2007/01/10/617004.html 喜欢梅花雨的日历控件,利用周末时间整合了该控件。主要功能如下:1.将该控件整合为.NET版本,做成服务器控件; 2.可以设计时显示输入文本框,并可以…

你了解Beyond Compare日志面板嘛

系统日志是记录系统中硬件、软件和系统问题的信息,同时还可以监视系统中发生的事件。用户可以通过它来检查错误发生的原因,或者寻找受到攻击时攻击者留下的痕迹。系统日志包括系统日志、应用程序日志和安全日志。Beyond Compare软件是一款专业级别的文件…