Web前端最全手把手教程-使用idea创建vue项目_idea怎么创建vue，2024年最新lv面试结果

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

简介：小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。

一、安装Node.js

首先要安装好Node.js，安装包可以自行去Node.js官网下载，也可以去我的网盘下载（下载地址），这里以我提供的安装包为例。

1. 双击安装包，打开，按照下图所示进行操作。

2. 继续如下图所示

3.  这一步是选择安装目录（读者可以自己定义下载目录）

4. 这里小编是安装在了E盘。

5. 安装完成后，确认是否安装成功。这里打开电脑的命令控制行（快捷方式，按住键盘上的win + R），输入以下命令 node -v  结果如下图所示表示成功。

6. Node.js安装完成，npm也就安装上了，可以用命令：npm --v 查看npm的版本。

二、安装vue-cli

1、使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install -g cnpm --registry=https://registry.npm.taobao.org   安装淘宝镜像，安装完成之后如下图，则说明安装成功

2、全局安装vue-cli，在cmd中输入命令: npm install -g @vue/cli,安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

3、然后分别输入vue -V（这是大写的V）     node -v   和   npm -v查看相应的版本号。出现下图表示成功。

三、用vue-cli来构建项目

1、首先在D盘新建一个文件夹（vuetest）作为项目存放地，然后使用命令行cd进入到项目目录输入：vue create xxxx 创建vue项目（xxxx是你的项目名称，自定义），出现下图表示成功。

2、然后进入下面的选择，Enter是确认选择，上下键是换选择，第二页的*****是用空格来取消标记（图中蓝色是小编的选择，请读者按照我的操作来进行）

01、选择第三项： Manually select features

02、选择 Babel 、Router

03、选择：2.x

04、输入Y

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

aScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-8f5yGIsf-1715892074771)]