Vue入门及上手教程

我所在的部门的职能是提高其他业务部门在产品交付上的更好、更快。以前，公司内部与三方公司签订了协议，购买了别人家一套开发软件，帮助我们更好地落地这个流水线的概念。后来，由于软件升级及需求限制，产品战略转型，转成自建流水线，再后来就有了这次Vue前端界面技术选型经历。

由于内部团队，包括三方支持公司的驻场人员对Vue都不是很熟悉，后来经过考虑，还是由我来主导和负责Vue前端界面的开发工作。其实，对于前端，我是有一定的基础的，但由于Vue这个框架以前我也没怎么接触过。那么后来我是如何在两个星期入门并上手Vue开发，这期间我的一些做法希望可以给你带来一点启发。

故事经历

当时，我们的目标和开发任务还是挺重的，我们给业务部门承诺的是两个星期把流水线的流程基本呈现出来，并基础可用。

刚开始，我的考虑是这样的。由于Vue我不熟悉，那么可以理解为零基础。对于零基础的我，怎么能更快的打通Vue的天地线呢？

我的做法就是开始两天死磕 Vue语法 和 官网案例 ，我的目的也是很明确的，为了尽可能少的避免认知盲区，基础的语法和概念性的东西，我是一定要知道的。

好了，经过两天的语法和案例的学习，期间我也做了不少笔录，作为记忆索引。

接下来，我需要找一个比较完备的Vue实战案例，经过在github上的一番搜索和选择，最后我决定使用 vue-element-admin , 这是一个比较完备的案例了，上面有很多基础的功能，可以减少不少的重复造轮子的时间。

那么，这个demo怎么使用呢？

记住以下几个步骤就可以启动起来了。

步骤：

1.安装 node.js环境

2.安装 Visual Studio开发工具 ，顺带也可以安装一下vue语法插件，帮助编写和提示代码。

3.依次执行如下命令， 可用Git Bash操作命令 ，大概就是拉取demo，初始化基础依赖等，当npm run dev执行完后，会自动打开本地网页。

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

经过上面一番操作后，现在可以在src目录下随便找一个.vue文件来修改，界面会实时更新。

那么，再接下来就是熟悉demo的项目结构（例如项目的加载入口，加载结构等），基础的配置文件（例如开发环境，测试环境，打包配置等）。

下面，我框红一些关键性的点，这是项目从开发到上线会涉及到的。

项目截图一览，框红部分需要特别注意。

经过一段时间的努力后，项目完成了，就可以打包发布到线上了。

打包时，重点需要关注的就是config目录，需要修改这个目录中的一些配置文件。

dev.env.js（修改开发环境请求的baseUrl）

prod.env.js（修改生产环境请求的baseUrl）

index.js（修改打包的一些基础配置）

上面的配置文件都修改好了之后，执行打包命令。

npm run build

等待打包结束，然后把打包好的dist文件夹上传到服务器指定的目录中即可。

最后，通过浏览器访问一下就可以看到Vue开发的前端界面了。