前言
准备开始学习前端技术，拓展一下自己的知识面，长时间跟后端打交到，希望也能学习进步多了解了解前端的开发架构，就从最基本的安装环境、运行前端Vue项目开始吧
安装本地node环境
先去官网下载node环境，然后执行node -v 、npm -v、cnpm -v会显示以下版本号； 配置node、npm、cnpm全局变量，Node安装目录下配置全局设置，node、npm命令在全局才会有用；
这样我们的 node、npm 、cnpm就已经安装完成
下载vue客户端
安装vue-cli脚手架
//执行命令
cnpm install vue-cli -g
//查看vue安装情况
vue list
这里可以看到我们的vue环境已经安装完毕
初始化vue项目
执行命令，这里主要是通过webpack初始化vue项目
vue init webpack myvue
初始化vue配置介绍
？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
？Author ---- 作者
？Vue build ---- 构建模式，一般默认第一个；
？Install vue-router? ---- 是否安装vue-router。选no。
？Use ESLint to lint yout code? ---- 格式校验，按需；no
？Set up unit tests ---- 测试相关，按需；no
？Setup e2e tests with Nightwatch? ---- 测试相关，按需； no
？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里选yes,
运行vue项目
进入Vue项目目录
//进入Vue项目目录
cd myvue
//安装项目依赖 （这里类型Java的maven依赖）
npm install
//运行vue项目
npm run dev
出现http://localhost:8080 表示vue项目已启动，可以在浏览器直接访问进入项目；
Vue目录介绍
项目目录介绍，我们通过VScode打开vue项目；
会有以下的目录分别为build、config、node_modules、src、static、test几个目录；
- build目录 主要有build 生产环境构建 check-version版本检查 Utils相关工具构建 vue-loader.conf—css加载器配置 webpack-base（基础环境）dev（开发环境）prod（生产环境）
- config目录 dev环境配置 项目主要配置，包括host、port端口监听配置 Pro生产环境配置 Test测试环境配置
- node_modules存放依赖包
- src目录 核心开发目录：包括Vue组件、main.js入口文件、router路由配置
- APP.vue页面介绍
template模版，包含一个顶层父节点div， 为路由视图，主要是做路由的跳转，跳转到某个路由，进行路由下面面的渲染；
script写vue逻辑的地方，包含data（数据）、method（方法）、mounted（生命周期）
style代表全局样式，默认是影响全局；如果需要只在此组件下使用，需要加入scoped标签；
