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

最新推荐文章于 2024-04-18 11:36:09 发布
最新推荐文章于 2024-04-18 11:36:09 发布
阅读量206 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plpldog/article/details/90175089
版权
本文介绍如何从零开始使用IntelliJ IDEA搭建一个Vue项目。首先讲解了Node.js、npm、Webpack和Vue的基础知识，接着指导读者安装Node.js。然后，通过Idea创建静态Web项目，并安装Vue CLI，初始化项目并启动本地服务器，最终成功运行一个简单的Vue应用。
摘要由CSDN通过智能技术生成

一、需要了解的基本知识

  • 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

最低0.47元/天 解锁文章
西红柿天尊
关注
专栏目录
用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目
iw1210的专栏
05-09 1万+
用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目 一、安装 Node.js 注：如果已经安装过 Node.js 当然就不需要安装啦。 下载地址：https://nodejs.org/en/download/。 下载完成后安装。 打开命令窗口执行下面两条命令查看是否安装成功： E:\> node -v v10.15.3 E:\> npm -v 6.4.1 二、搭...
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
世上最简单的vue教程
ratel的博客
12-11 2482
一、需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.j...
超简单的Vue入门~1
洒家
08-08 183
一直在官网上看VUE的文档，觉的有点乱，所以在这里整理下VUE的一个入门知识点，如果有问题请发送1107156171@qq.com邮件或者在文章下面留言 1、VUE是什么？ “一个用于构建用户界面的渐进式框架”，所谓渐进式框架指的是没有强制主张，只做自己职责的事。以上是网络上流传的版本，个人的理解所谓的渐进式框架，是在使用vue开发页面时，所用的核心是VUE组件，在项目最开始只是一个组件，随着功能...
Vue笔记（狂神说）
THB66666的博客
09-09 1700
一、前端核心分析 狂神视频链接 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1.2、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（C
vue.js最简单的例子
qq_30908729的博客
07-27 333
只需复制以下代码，新建一个html页面，用浏览器打开即可 源码地址：http://www.yayihouse.com/yayishuwu/chapter/1120
从零开始搭建基于vite的vue项目
sayUonly的博客
11-08 3739
从零开始搭建基于vite的react项目用vite创建react项目创建项目结构项目的环境配置 用vite创建react项目 这里我们默认已经安装好了vite环境，如有疑问，可以参考官网的安装流程。 打开cmd，将目录指向你的代码仓库，然后输入一下命令。 # npm 6.x npm init vite@latest my-react-app --template react # npm 7+, 需要额外的双横线： npm init vite@latest my-react-app -- --templat
搭建一个简单Django+vue 项目
ccy950903的博客
03-14 1939
简介： Django是python的web开发框架，采用了MTV的框架模式，即模型Model，视图View和模版Template。 各自的职责为： 模型（Model），即数据存取层：如何存取、如何验证有效性、包含哪些行为以及数据之间的关系等； 模板(Template)，即表现层：如何在页面或其他类型文档中进行显示； 视图（View），即业务逻辑层：存取模型及调取恰当模板的相关逻辑，模型与...
最简单的Vue.js入门方法
weixin_44092113的博客
04-03 243
最近花了几天看了下vue， 确实vue相对于其他两大前端框架来说，学习成本会低很多。 文档、社区、资料都很完善。下面是我觉得还不错的学习路径,希望对你有帮助。 传统的前端项目开发最大的问题是没法工程化和模块化。 css跟js（es6之前）本身不支持模块化开发，也就导致了代码文件没法按功能拆分、组合、压缩优化，这在大型项目的开发上制造了很多麻烦。另外在大前端日趋火热的当下，为了写一次接口能适配到不同...
史上最简单的Vue入门教程，Vue基础语法
十三月的博客
05-27 341
Vue简介： IDEA中安装vue插件 demo.html（cdn引入vue.js） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {.
Vue简单快速入门
维他柠檬茶的博客
04-22 2284
Vue内容分发 (slot插槽)1.原本使用组合的组件方式2.使用slot插槽进行组合组件自定义事件1.关键点2.例子 内容分发 (slot插槽) slot插槽的作用：组合组件解耦合 1.原本使用组合的组件方式 <p>组件标题</p> <ul> <li>组件的内容1</li> <li>组件的内容2 </li> <li>组件的内容3</li> </ul> 2.使用
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
使用IDEA创建Vue项目
weixin_45732391的博客
01-01 8111
使用IDEA创建Vue项目 1.File==>New==>Project 2.点击Static Web,选择右边的Vue.js，点击下一步 3.修改项目名称，其它的默认值可以不修改 4.后续许多页面的默认值可以不修改，一直点击下一步 5.创建完成之后，点击左下角的npm，双击start，如果报错，打开终端，输入npm i,然后回车 5.再点击start即可，蓝色地址即是项目访问地址。 ...
Vuejs入门级简单实例
包子源的博客
01-10 2914
Vue作为2016年最火的框架之一，以其轻量、易学等特点深受大家的喜爱。并与angular和react前端框架三分天下。 今天简单介绍一下Vue的使用。 首先，需要在官网下载vuejs，或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环： v1.html: {{message}}
IDEA创建vue项目详解
m0_48402871的博客
03-21 1万+
IDEA创建vue项目详解 一、安装node.js node.js中文网 选择相应的压缩包，下载成功后，解压直接默认安装即可 安装成功后，打开cmd输入 npm -v 和 node -v 命令可查看版本号 若 控制台显示npm或者 node命令不可用，则是没配置环境变量。 找到自己的node安装路径配置即可 配置淘宝镜像，在cmd输入以下命令 npm i -g cnpm --registry=https://registry.npm.taobao.org 安装vue-c
IDEA中Vue开发环境搭建
最新发布
yinshengchen的博客
04-18 7843
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
用idea创建vue项目
m0_67677436的博客
05-12 1万+
目录 一、安装node.js （1）下载安装包 （2）测试node.js是否安装成功 （3）安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js 官网下载下载地址：Download | Node.js （1）下载安装包 安装过程很简单，全部next即可。 （2）测试node.js是否安装成功 在键盘按下win+R键，输入cmd回车，打开cmd窗口； 查看版本操作：node.
IDEA创建Vue项目
包子的博客
01-27 238
新建项目 1.File - > New -> Project 2.JavaScript -> Vue.js -> Next 3. Project name：项目名称 Project location:项目保存路径 Node interpteter:Node.js Finish 等待下载完毕即可
请搭建一个springboot加vue的demo项目
05-20
好的，以下是一个简单的Spring Boot + Vue.js的Demo项目搭建步骤： 1. 首先，我们需要创建一个Spring Boot项目。可以使用Spring Initializr（https://start.spring.io/）快速创建一个基础项目，选择Maven项目和Spring Boot版本，并添加Web和Thymeleaf依赖。下载生成的项目后，使用IDEA或者其他IDE打开。 2. 接下来，我们需要添加Vue.js到项目中。在项目根目录下新建一个名为“frontend”的文件夹，用于存放前端代码。我们可以使用Vue.js官方提供的脚手架工具Vue CLI来快速创建一个Vue.js项目。 首先，确保已经安装了Node.js和npm。然后在命令行中输入以下命令安装Vue CLI： ``` npm install -g vue-cli ``` 安装完成后，在frontend目录下执行以下命令创建一个Vue.js项目： ``` vue init webpack frontend ``` 在执行过程中，需要输入一些基本信息，例如项目名称、描述等。完成后，进入frontend目录，执行以下命令安装项目依赖： ``` npm install ``` 3. 接下来，我们需要将Vue.js项目与Spring Boot项目集成。在Spring Boot项目的src/main/resources/static目录下新建一个名为“frontend”的软链接，指向frontend目录下的dist目录（在frontend目录下执行npm run build生成）： ``` ln -s ../frontend/dist frontend ``` 4. 修改Spring Boot项目的配置文件，将Spring Boot的Web服务器端口设置为8080，并配置静态资源路径： ``` server: port: 8080 servlet: context-path: / spring: resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:./frontend/ ``` 5. 在Spring Boot项目中，添加一个RESTful接口来返回一些数据。例如，在UserController中添加以下代码： ```java @RestController public class UserController { @GetMapping("/users") public List<User> getUsers() { List<User> users = new ArrayList<>(); users.add(new User(1, "Tom")); users.add(new User(2, "Jerry")); return users; } } ``` 6. 在frontend目录下，修改src/components/HelloWorld.vue文件，使用axios来调用Spring Boot项目中的RESTful接口： ```vue <template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script> import axios from 'axios' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', users: [] } }, mounted () { axios.get('/users').then(response => { this.users = response.data }) } } </script> ``` 7. 最后，在frontend目录下执行以下命令启动Vue.js开发服务器： ``` npm run dev ``` 在浏览器中访问http://localhost:8081，应该可以看到Vue.js的示例页面，其中包含了从Spring Boot项目中获取到的数据。 至此，一个简单的Spring Boot + Vue.js的Demo项目就搭建完成了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值