0
点赞
收藏
分享

微信扫一扫

Vue项目入门学习

驚鴻飛雪 2022-04-17 阅读 59
vue.js

一、环境

环境已经搭好,所以就不废话了,看一下我的版本
在这里插入图片描述
这已经是最新环境了。

二、创建项目

我们使用命令vue create创建,如下:

vue create v1

在这里插入图片描述
提示说:请选择一个预设,预设就是项目的一些初始化,就是给你安装规定一些基本的东西,以前的低版本vue创建项目是用vue init webpack 【projectName] 命令,现在我们有了vue create,不再使用vue init了。
这里我们选择默认(Default([Vue 3])babel, eslint)。
复杂的创建项目,请参考《VueCLI v4.5.4 创建vue项目(手选模式创建)》这篇文章。
回车等不到一分钟,很快就创建好了,如下:
在这里插入图片描述

三、启动项目

项目创建好后,进入项目目录,运行命令

npm run serve

回车,启动项目…,也就很快,启动了,如下图示:
在这里插入图片描述
此时我们访问浏览器输入:http://localhost:8080/,进入项目,如下:
在这里插入图片描述
从此,可以开始你的装逼表演了。不过在写代码之前,应该了解一下项目结构,这样做是为了更好的理解工程架构,我看过一些前端项目,写的真让人头晕,没有犯规,该放的文件不放,不该放置的就随便放,真让人不爽快,了解项目结构的意识就是这里了,为了让项目看起来很容易阅读,代码清晰,因此又不要了解,而且了解结构就是第一步,必学的基础。

四、项目结构与解释

举报

相关推荐

0 条评论