从0到1构建元素背景框架的方法步骤

最近公司要开发后台管理系统，查阅了很多vue框架。我觉得element简单方便，所以选择它作为我们的首选框架，与大家分享。如果觉得有需要改进的地方，可以一起讨论。Github地址。这篇文章比较长，希望同学们耐心看完，看不懂的话在下面留言

一、初始化项目

首先，vue框架是全球安装的。这里，npm包管理工具用于安装它。如果你的网络不是很好，可以先安装淘宝镜像NPM install-g cnpm-registry=https://registry.npm.taobao.org，然后通过CNPM安装。

Cnpminstall-g @ vue/CLI或npminstall-g @ vue/CLI接下来开始安装vue脚手架，目前是vue-cli 3.x的第三个版本

安装cnpm install -g @vue/cli后，还可以使用此命令检查其版本是否正确(3.x):

Vue - version在安装脚手架后开始创建我们的项目

vue创建vue-管理-项目有两个选项

选择第二项并继续，选择需要配置的功能。完成后，继续，然后开始生成项目

项目初始化成功

然后，根据上面的提示，运行cd应用程序并启动本地服务器npm run serve。运行后，系统会提示您调用本地端口http://localhost:8080，并出现欢迎页面，这意味着您的vue项目初始化完成。

二、文件目录介绍与整理

完成前初始目录

|-vue-admin-project |-。gitignore//git project ignore文件| - babel.config.js //babel配置文件|-package-lock . JSON///记录安装包的具体版本号|-package . JSON//包类型|-readme . MD |-public//项目打包后的目录| |-fav icon . ico | |-index . html |-src//项目开发目录|-app . vue//主入口文件|-main . js//主入口文件| - router.js /。vue-路由器文件| |-store . js//vuex |-assets///静态文件|-logo . png |-组件//组件存储目录|-hello world . vue |-view//view目录| - About.vue | - Home.vue

| - vue-admin-project | -。git ignore |-babel . config . js |-package-lock . JSON |-package . JSON |-readme . MD |-public |-fav icon . ico |-index . html |-src |-app . vue |-main . js |-assets |-logo . png |-components |-helloworld . vue |-router//路由配置文件夹|-router . js |-store//状态管理文件夹|-store . js |-view |-about . vue |-home . vue 010很多配置需要自己配置。因为在2.0x版本中，

首先，配置开发环境并创建一个新文件。项目根目录下的env文件。

NODE_ENV='development' //开发环境base _ URL=' http://localhost 33603000/'//开发环境接口地址接下来，我们配置在线环境并创建一个新文件。项目根目录中的env.prod，这表明它是一个生产环境。

NODE_ENV='production' /生产环境BASE_URL='url' /生产环境的地址我们现在如何判断项目中的当前环境？

我们可以根据