vue + elementUI 项目架构解读

文章目录

    • 人生格言
    • 如何构建工作区
      • 在任意路径下构建一个空的文件夹
      • 之后通过vscode 文件 -》打开文件夹
      • 之后文件-》将工作区另存为
      • 看到一下文件说明成功了
    • 构架框架的步骤
      • 官网下载一下压缩包
      • 第二步存放到工作区 vscode
      • 在vscode 找到文件 在终端打开
      • 在终端打开之后运行 npm install 命令 进行依赖的下载
      • 下载完成之后会生成一下文件
      • 有了上述文件之后我们在终端运行 npm run dev 或者运行 npm run prod
    • 框架总体架构
      • 目录简述

人生格言

未来犹存,人生当前

如何构建工作区

在任意路径下构建一个空的文件夹

之后通过vscode 文件 -》打开文件夹

之后文件-》将工作区另存为

看到一下文件说明成功了

vue + elementUI 项目架构解读_第1张图片

构架框架的步骤

官网下载一下压缩包

在这里插入图片描述
第一个是功能简化版,第二个是功能增强版

第二步存放到工作区 vscode

解压之后存放到我们的vscode工作区

在vscode 找到文件 在终端打开

vue + elementUI 项目架构解读_第2张图片

在终端打开之后运行 npm install 命令 进行依赖的下载

vue + elementUI 项目架构解读_第3张图片

下载完成之后会生成一下文件

vue + elementUI 项目架构解读_第4张图片

有了上述文件之后我们在终端运行 npm run dev 或者运行 npm run prod

进入一下界面时间可能会有点长
vue + elementUI 项目架构解读_第5张图片
上图也是项目架构成功构建的标志

框架总体架构

vue + elementUI 项目架构解读_第6张图片

目录简述

vue + elementUI 项目架构解读_第7张图片
vue + elementUI 项目架构解读_第8张图片

你可能感兴趣的:(框架,Web前端,vue.js,elementui,前端)