VUE认识与下载（VUE学习与开发一）
Vue的介绍：
Vue是当下非常火的一个前端开发框架。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
VUE的下载方式：
Vue的安装方式有三种：
第一种：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本，直接在你的HTML项目中直接引入即可
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第二种就是<script> 表签进行引用，这个要求你把Vue.js下载当本地。实际就是将CDN方式的地址换成自己的本地Vue.js
下载Vue.js.进入官网然后点击起步，找到安装
这里有2个版本可以进行选择，右键点击链接另存为，就可以得到一个Vue.js的文件。我放在桌面一会直接导入到项目中
打开集成开发坏境，创建一个项目。然后将本地的vue.js放入即可。创建一个文件夹放vue.js,在需要的地方直接引用即可
第三个方式npm方式：
这个方式就是要创建一个大型完整的Vue项目了，之前我们都是在一个个页面引入而已。因为创建一个项目一般来说配置很多也很复杂，所以Vue官方出了一个脚手架（Cli）就是辅助大家创建项目的东西。
给一个官方解释：Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
首先，先列出我们接下来需要的东西：
- node.js环境（npm包管理器）
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像
第一步我们安装node.js
可以直接在官方网站中下载安装.
版本要求在8.9以上，还有一个工具npm 会被默认一起下载来了。
查看自己的node.js的版本：
因为npm是国外的包管理，有时候比较慢（不用太纠结这个）。如果要速度快一写，可以换成国内的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了（以后用到npm的地方 都换做CNPM）：
cnpm install [name]
第二步安装脚手架工具了：前提条件都准备好了。
脚手架的官方网址：https://cli.vuejs.org/
npm install -g vue-cli（这个命令就是下载vue脚手架）
然后就可以使用脚手架的创建项目了。（现在很多开发软件都可以有vue-cli）一般不再命令行创建项目了。实质都是一样。
每一个版本的cli 创建项目的语句 有一些不同。具体可以百度
第三步演示创建一个VUE项目
随便进入一个文件夹：(就是你项目的地址)
创建命令是：vue create my-project(这是项目名这是Vue-cli3的语法)
或者是：vue-ui （这个图形化界面的创建过程）
当你输入了正确的创建命令后，就开始选择不同的配置：我用cli4
空格就是选中，上下切换 回车就是确认。第一个是默认的配置，第三个就是自己手动选择，一般手动选择router,vuex,store就可以了。其他的都默认不选，
这个选择之后会有很多的默认规则要你选择，每个版本也是不一样的，也需要大家自己百度规则，根据自己项目要求进行选择。
这就是创建好的项目目录结构：
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
————————————————
原文链接：https://blog.****.net/tanzhenyan/article/details/78871610