VUE｜安装部署VUE环境、命令行工具vue-cli、VUE总体架构

安装部署VUE环境、命令行工具vue-cli、VUE总体架构

一、VUE概述
1、从MVC到MVVM
在这里插入图片描述

2、三大主流前端框架之一
◼ 基于HTML、CSS、JavaScript基础之上
◼ 渐进式JavaScript框架，Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
◼ 目标是通过尽可能简单API实现响应的数据绑定和组合的视图组件

特点
◼ 易用、灵活、高效
◼ Vue 为复杂的单页应用(SPA)提供驱动
◼ https://cn.vuejs.org

在这里插入图片描述 ◼https://github.com/angular/angular

◼https://github.com/facebook/react

◼https://github.com/vuejs/vue

如果您比其他功能更喜欢灵活性，请使用React。
如果您喜欢在TypeScript中编码，请选择Angular。
如果您是JavaScript爱好者，请使用React，因为它完全与JavaScript有关。
如果您喜欢干净的代码，请在您的应用程序中使用Vue。
Vue提供最简单的学习曲线，是初学者的理想选择。
如果要在应用程序中分离关注点，请使用Vue。
如果您喜欢面向对象的编程，Angular绝对是您的选择。
Vue非常适合小型团队和小型项目。如果您的应用程序似乎很大并且具有重要的未来扩展计划，请选择React或 Angular。

二、安装部署VUE环境
方法1、下载vue.js到本地并用< script >引入
在这里插入图片描述
方法2、使用CDN方法直接< script >引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方法3、NPM安装，大型项目推荐此方法

 $ npm install vue (安装vue)
 $ npm –v (查看版本)
 $ npm install npm –g (升级npm)

NPM（Node Package Manager）
◼ 基于Node.js、Node.js社区最流行、支持第三方模块最多的包管理器
◼ 随同NodeJS一起安装，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
◼ npm的使用场景：让JavaScript开发人员更容易分享和重用代码

允许用户获取第三方包并使用。
允许用户将自己编写的包或命令行程序进行发布分享。

◼ 对于中国大陆用户，可将NPM源设置为国内的淘宝镜像，以大幅提升安装速度(NPM http://npm.taobao.org)

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install npm -g (升级cnpm)

三、命令行工具vue-cli
◼ vue-cli：为单页面应用(SPA)快速搭建繁杂的脚手架

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack myProject
# 其他需要进行的一些配置，默认回车即可

◼ Webpack：打包所有的资源和脚本
在这里插入图片描述
◼ 进入项目，安装并运行

$ cd myProject
$ cnpm install
$ cnpm run dev

打开浏览器输入:http://localhost:8080，
在这里插入图片描述

四、开发、部署
1、开发工具
Vscode、sublime、webstorm等IDE开发工具

2、使用IDE
使用vscode打开vue-cli创建的vue项目myproject
Vue项目的目录结构如下
在这里插入图片描述
需要安装Vetur extension

3、目录解析
◼ build: 项目构建webpack相关代码
◼ config: 配置目录，包括端口号等
◼ node_modules: npm install 以后出现的依赖包
◼ src:开发目录:

assets:放置一些图片，如logo等
components: 目录里面放了一个组件文件，可以不用
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
main.js: 项目的核心文件。

◼ static:静态文件
◼ index.html:入口文件
◼ package.json:配置文件
◼ README.md:项目说明文档

4、Vue Devtools调试工具
◼ 下载Vue Devtools
git clone https://github.com/arcliang/Vue-Devtools-
◼ (2)进入vue-devtools目录下，安装构建工具所需要的依赖 cnpm install
◼ (3)构建工具 npm run build

Vue-Devtools安装配置教程
在这里插入图片描述