由于最近公司要开发一个后台管理系统，查阅了很多vue框架,本人觉得element简洁，方便，于是选择它作为我们的首选框架，并分享给大家，如果您觉得有需要改进的地方可以提出来一起探讨，Github地址。本文篇幅比较长，希望同学们可以耐心的读下去，如有不懂可以下方留言
一、初始化项目首先全局安装的vue框架，这里是用的npm包管理工具来安装的，如果你的网不是很好的话可以先安装淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org,然后通过cnpm来安装
cnpm install -g @vue/cli or npm install -g @vue/cli
其次开始安装vue脚手架，当前是第三版本vue-cli 3.x
cnpm install -g @vue/cli
安装完成后，你还可以用这个命令来检查其版本是否正确 (3.x)：
vue --version
安装脚手架后开始创建我们的项目
vue create vue-admin-project
随后会出现两个选项
选择第二项并继续，并选择自己需要配置的功能，完成后并继续，然后开始生成项目
项目初始化成功
接下来按照上面的提示运行 cd app以及启动本地服务器 npm run serve,当运行完成之后会提示你打来本地端口 :8080,会出现欢迎页面，此时代表你的vue项目初始化完成。
整理前的初始目录
|-- vue-admin-project |-- .gitignore //git项目忽视文件 |-- babel.config.js //babel 配置文件 |-- package-lock.json //记录安装包的具体版本号 |-- package.json //包的类型 |-- README.md |-- public //项目打包后的目录 | |-- favicon.ico | |-- index.html |-- src //项目开发目录 |-- App.vue //主入口文件 |-- main.js //主入口文件 |-- router.js //vue-router文件 |-- store.js //vuex |-- assets //静态文件 |-- logo.png |-- components //组件存放目录 |-- HelloWorld.vue |-- views //视图目录 |-- About.vue |-- Home.vue
整理后的目录，主要更改 /src文件夹下的目录
|-- vue-admin-project |-- .gitignore |-- babel.config.js |-- package-lock.json |-- package.json |-- README.md |-- public |-- favicon.ico |-- index.html |-- src |-- App.vue |-- main.js |-- assets |-- logo.png |-- components |-- HelloWorld.vue |-- router //路由配置文件夹 |-- router.js |-- store //状态管理文件夹 |-- store.js |-- views |-- About.vue |-- Home.vue
三、开发环境与线上环境配置vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化，这也带来了许多问题，很多配置需要自己配置，由于2.0x版本中直接在 cofig/文件夹下面配置开发环境与线上环境，3.0x则需要自己配置。
首先配置开发环境，在项目根目录下新建一个文件 .env文件。
NODE_ENV="development" //开发环境 BASE_URL="http://localhost:3000/" //开发环境接口地址
接下来我们配置线上环境，同样在项目根目录新建一个文件 .env.prod这就表明是生产环境。
NODE_ENV="production" //生产环境 BASE_URL="url" //生产环境的地址
现在我们如何在项目中判断当前环境呢？
我们可以根据 process.env.BASE_URL来获取它是线上环境还是开发环境，后面会有运用
if(process.env.NODE_ENV='development'){ console.log( process.env.BASE_URL) //http://localhost:3000/ }else{ console.log( process.env.BASE_URL) //url }
至此，我们成功的配置好了开发环境与线上环境。
四、vue.config.js配置讲到 vue.config.js项目配置文件，又不得不说下3.x和2.x的区别,2.x里面webpack相关的配置项直接在项目的 build/webpack.base.conf.js里面配置，而3.x完全在 vue.config.js中配置，这使得整个项目看起来更加简洁明了,项目运行速度更快。
由于项目初始化的时候没有 vue.config.js配置文件，因此我们需要在项目根目录下新建一个 vue.config.js配置项。
在这个配置项里面，本项目主要是配置三个东西，第一个就是目录别名 alias，另一个是项目启动时自动打开浏览器，最后一个就是处理引入的全局scss文件。当然有 vue.config.js的配置远远不止这几项，有兴趣的同学可以去看看vue.config.js具体配置，具体代码如下。