一、需要了解的基本知识


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

     
     

基于Idea从零搭建一个最简单的vue项目的更多相关文章

  1. 从零搭建一个IdentityServer——聊聊Asp.net core中的身份验证与授权

    OpenIDConnect是一个身份验证服务,而Oauth2.0是一个授权框架,在前面几篇文章里通过IdentityServer4实现了基于Oauth2.0的客户端证书(Client_Credenti ...

  2. 从零搭建一个IdentityServer——会话管理与登出

    在上一篇文章中我们介绍了单页应用是如何使用IdentityServer完成身份验证的,并且在讲到静默登录以及会话监听的时候都提到会话(Session)这一概念,会话指的是用户与系统之间交互过程,反过来 ...

  3. 从零搭建一个IdentityServer——资源与访问控制

    IdentityServer作为授权服务器它的最终目的是用于对资源进行管控,这里所说的资源有两种,其一是API资源,实际上也就是OIDC协议中客户端(RP)所需要访问的一系列受保护的资源(API),授 ...

  4. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  5. Dubbo入门介绍---搭建一个最简单的Demo框架

    Dubbo入门---搭建一个最简单的Demo框架 置顶 2017年04月17日 19:10:44 是Guava不是瓜娃 阅读数:320947 标签: dubbozookeeper 更多 个人分类: D ...

  6. 搭建一个最简单的node服务器

    搭建一个最简单的node服务器 1.创建一个Http服务并监听8888端口 2.使用url模块 获取请求的路由和请求参数 var http = require('http'); var url = r ...

  7. 从零搭建一个SpringCloud项目之Feign搭建

    从零搭建一个SpringCloud项目之Feign搭建 工程简述 目的:实现trade服务通过feign调用user服务的功能.因为trade服务会用到user里的一些类和接口,所以抽出了其他服务需要 ...

  8. 从零搭建一个IdentityServer——目录(更新中...)

    从零搭建一个IdentityServer--项目搭建 从零搭建一个IdentityServer--集成Asp.net core Identity 从零搭建一个IdentityServer--初识Ope ...

  9. 一起来学Spring Cloud | 第一章 :如何搭建一个多模块的springcloud项目

    在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的spr ...

随机推荐

  1. Sql 语句中使用参数

    using System; using System.Data; using System.Data.SqlClient; namespace ConsoleApplication2 { public ...

  2. jvm调优-命令大全(jps jstat jmap jhat jstack jinfo)

    现实企业级Java开发中,有时候我们会碰到下面这些问题: OutOfMemoryError,内存不足 内存泄露 线程死锁 锁争用(Lock Contention) Java进程消耗CPU过高 运用jv ...

  3. $[WC2018]$通道(虚树,边分练习)

    \([WC2018]\)通道(虚树,边分练习) 感受码题的快感 这段时间真的是忙忙忙忙忙,省选之前还是露个脸,免得以后没机会了. 但是我感觉我的博客真的没啥人看,虽然我挺想要有人看的,但是自己真的没啥 ...

  4. 对https的研究

    HTTPS简介 超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HTTP ...

  5. The list of list is modified unexpected, python

    Be careful! The list of list is modified unexpected, python # code patch A: list = [1,2,3,4,5,6,7] p ...

  6. Linux学习-基于CentOS7的MariaDB数据库的主从复制

    一.MySQL主从复制原理 主从同步过程中主服务器有一个工作线程I/O dump thread,从服务器有两个工作线程I/O thread和SQL thread: 主服务器: dump Thread: ...

  7. u盘被占用,无法弹出解决办法

    方法1.把鼠标放到电脑屏幕最底部的中央,点击右键,点击 任务管理器 方法2.按:CTRL+ALT+ENTER(回车)   打开任务管理器,点击   进入性能后点击下方的:资源管理器   回到桌面,查看 ...

  8. Jenkins必备插件

    1.汉化插件 https://plugins.jenkins.io/localization-zh-cn 2.邮件发送 https://plugins.jenkins.io/email-ext 3.G ...

  9. BZOJ 4836: [Lydsy1704月赛]二元运算 分治FFT

    Code: #include<bits/stdc++.h> #define ll long long #define maxn 500000 #define setIO(s) freope ...

  10. luoguP2365 任务安排 斜率优化 + 动态规划

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...