Vue入门及上手教程

前言

当时所在的部门是属于公司层面横向支持的，例如提高其他业务部门在产品的交付上更好、更快。

以前，为了更快落地这个DevOps流水线的概念，公司层面与三方巨头公司购买了一套可落地的系统，但后来，由于软件升级及需求限制等，最终考虑自建流水线系统。

对于Vue框架，由于当时是比较新的东西，大家都没怎么接触。后来经过考虑，由我来负责Vue前端的开发工作。一方面前端我有一些基础，另外我自己也比较喜欢挑战和接触新鲜事物。

由于当时承诺了业务平台，我们要在两个星期基础完成开发工作，并系统基础可用。在两个星期之内，从0到1入手vue并完成界面的开发工作的这段经历分享给你，希望可以带来一些启发。

过程

语法部分

从0开始接触vue，那么就需要更多的了解vue的特性和相关实战的用法。

刚开始两天，我查了一些vue语法的网站，死磕Vue语法和官网案例，这些基础性的概念能减少很多认知的盲区，是需要的。

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

vue demo部分

接下来，我开始找Vue实战案例，想要尽快阅读了解真实的vue框架的结构和用法，经过在github上的一番搜索和选择，最后我决定使用vue-element-admin, 这是一个比较完备的vue案例，上面有很多基础的功能，并且通过阅读代码可以更快了解结构的分布和搭建，可以减少不少的重复造轮子的时间。

通过下面这几个步骤，就可以把vue 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