前言：
如果要开发一个平台，不仅需要掌握后端技术，还需要通过前端页面进行展示，即达到美观效果，又方便我们进行操作达到很好的交互效果。
这里我接触到了vue前端框架，市面上有很多比较好用的基于vue的前端组件库，比如面向app的饿了么Mint UI，面向腾讯微信内网页和微信小程序的We UI，服务于pc界面的iView UI，面向所有层次的layUI，还有现在即将要学习的饿了么推出的Element UI，主要用于浏览器界面展示的框架；
一、安装node.js
安装《软件安装包》目录下的 node-v12.18.2-x64.msi
下载地址：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
终端窗口查询是否安转对应node或者npm:
node -v
npm -v
编辑
二、安装淘宝cnpm
NPM镜像_NPM下载地址_NPM安装教程-阿里巴巴开源镜像站
打开终端，执行如下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
查询cnpm信息：cnpm -v
编辑
创建项目：cnpm --startproject [projectname]
三、安装vue-cli脚手架
#使用npm npm install -g @vue/cli #或者使用淘宝npm镜像源（建议使用cnpm） cnpm install -g @vue/cli
如果安装过程中报如下错：
To install it, you can run: npm install --save vue-runtime-helpers
执行如下命令：
npm install --save vue-runtime-helpers
四、使用vs code或者webstorm创建工程项目
建议安装git进行源码管理
#创建项目 vue create 项目名 或者在webstorm里新建一个vue.js的项目 #如果使用gitbash winpty vue.cmd create 项目名 #或者创建默认工程目录 vue create 项目名 --default #用命令vue init webpack+项目名称 #来生成和初始化项目，推荐初始化项目名称到加入路由那处选择默认，之后全选no，之后npm初始化那里选推荐默认选项npm就好; 如下图所示：
编辑
编辑
五、启动项目
方法1：
打开terminal，执行如下命令：
cnpm run serve
方法2：
进入到指定的项目目录里运行项目
cd 项目目录（cd my_vue）
cnpm run serve
组件的关系：
components目录--存放子组件文件
App.vue----父组件文件
- 父组件要使用子组件时候注意：
- 在<script>里导入子组件模块
- 在export default里的components里声明子组件
- 在templates里引用该
目录解析
| 目录/文件 | 说明 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
