- 前言
- Vue的介绍和vue-cli
- 一、发展历史
- 相关网址
- 介绍
- Vue框架的特点
- 二、Vue 的环境搭建
- 1，卸载掉所有已经存在的所有Node.js版本
- 2，下载MVM包
- 4、安装node.js
- 5、常见的插件
- 三、利用 vue-cli 新建一个空的项目
- 1、官方代码参考
- 2、安装 vue-cli（命令行工具）
- 3、初始化一个 simple 项目
- （1）首先执行
- （2）本地运行项目
- 四、vue 项目结构分析
前言
下一篇文章 01-01.Vue的插值表达式和常用指令（一）
Vue的介绍和vue-cli
一、发展历史
-
2013年底作为尤雨溪个人实验项目开始开发
-
2014年2月公开发布。
-
2014年11月发布0.11版本
-
2016年10月发布2.0版本。
相关网址
-
中文官网
-
vuejs官方论坛
-
GitHub地址：https://github.com/vuejs/vue
-
Vue1.0 在线文档：http://v1-cn.vuejs.org/guide/
-
Vue2.x 在线文档：https://cn.vuejs.org/v2/guide/
-
Vue1下载地址：http://v1-cn.vuejs.org/js/vue.js
-
Vue2下载地址：https://cdn.jsdelivr.net/npm/vue/
介绍
Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。
Vue 以及大型 Vue 项目所需的周边技术，构成了生态。
渐进式框架图：
Vue框架的特点
-
模板渲染：基于 html 的模板语法，学习成本低。
-
响应式的更新机制：数据改变之后，视图会自动刷新。【重要】
-
渐进式框架
-
组件化/模块化
-
轻量：开启 gzip压缩后，可以达到 20kb 大小。（React 达到 35kb，AngularJS 达到60kb）。
二、Vue 的环境搭建
安装NVM，NVM的全称：Node Version Manager，是一个简单的bash脚本用来管理系统中多个已存的Node.js版本
安装步骤：
1，卸载掉所有已经存在的所有Node.js版本
2，下载MVM包
在 https://github.com/coreybutler/nvm-windows/releases 网站下载安装
4、安装node.js
网址：https://www.jianshu.com/p/13f45e24b1de 安装和环境配置
我们首先要安装好 NVM、Node.js环境，然后再来做下面的操作。
5、常见的插件
-
Webpack：代码模块化构建打包工具。
本质上，webpack是一个用于现代化JavaScript应用程序的 静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或 多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundels(包)，它们均为静态资源，用于展示内容
-
Gulp：基于流的自动化构建工具。
Gulp的参考网址 https://www.gulpjs.com.cn/docs/getting-started/quick-start/
-
Babel：使用最新的 规范来编写 js。 参考网址：https://zhuanlan.zhihu.com/p/43249121
Babel时做什么的，简单来说把，JavaScript中es2015/2016/2017/2046的新语法转化为ES5，让低端运行环境(如浏览器和node)能够认识并执行。严格来说，babel也可以转化为更低的规范，但以目前情况来说，es5规范已经足以覆盖绝大部分浏览器，因此常规来说转到es5是一个安全且流行的做法
-
Vue：构建数据驱动的Web界面的渐进式框架
-
Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
网络应用程序，express是一个最小且灵活的Node.jsWeb应用程序框架，它为web和移动应用程序提供了一组强大的功能
蜜蜂：有了无数可供您使用的HTTP实用程序方法和中间件，创建强大的API变得快速而见简单。
表现：express提供了一层薄薄的基本web应用程序功能，而不会掩盖您熟悉和喜爱的node.js功能
构架：许多流行的框架都基于Express
以上这些包，都可以通过 NPM 这个包管理工具来安装。
三、利用 vue-cli 新建一个空的项目
Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
1、官方代码参考
npm install -g @vue/cli // 全局安装vue框架
vue create my-app // 具体文件夹中创建项目
cd my-app // 进入创建的项目
npm run serve // 默认启动命令
我们根据上方的参考代码，来看看“利用 vue-cli 新建一个空的项目”的步骤。
2、安装 vue-cli（命令行工具）
安装命令如下：
# 全局安装 vue-cli
$ npm install -g @vue/cli
3、初始化一个 simple 项目
（1）首先执行
vue create my-app
输入上方命令后，会弹出一个选项：
如果是初学者，直接选default就行。之后会自动生成一个空的初始化项目，包含了项目目录、以及项目依赖的脚本。
这个空项目的工程文件如下：（请务必仔细研究这个项目的写法和目录结构）
- 2019-06-21-vue-my-app.zip
我们可以看到这个项目的结构：
-
src：项目源码
-
.babelrc：ES6编译插件的配置
-
index.html：单页面的入口
上方截图中，npm install 指的是下载各种依赖包，npm run dev指的是打开发包，npm run build指的是打生产包。
（2）本地运行项目
cd my-app
npm run serve
浏览器输入http://localhost:8080/，就可以让这个空的项目在本地跑起来：
备注：我们在 GitHub上下载的任何Vue有关的项目，第一步都是要首先执行 npm install，安装依赖的 mode_modules，然后再运行。我们发给同事的工程文件，建议不要包含 node_modules。
为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题，我们使用 管理员身份 打开命令行
第一步，打开命令行后，首先进入我们想要创建项目的目录下
g: 表示切换进入G盘
cd git 表示打开 当前盘下的 git 文件夹
大家可以根据以上两个命令进入自己想要保存项目的目录下，我这里是保存在 G:\Git 文件夹
第二步，执行 vue create xxxx 命令
xxxx 代表 项目名称
这里我们选择 (通过 键盘上的方向键) 第三项，
第三项可以手动选择创建项目时 一同创建的"工具"，比如vue-router，sass 等等，
而上面的两个选项则不能 选择与项目一同创建的“工具”。（选择完毕后 敲 回车键 ）
出现这个界面时，默认勾选的三个不用动就行，正常情况下，Progressive、Unit Testing、E2E Testing 不需要安装。
其他选项 根据 项目 需要 进行选择，我们这里选择下面几种常用“工具”。（方向键 进行 切换，空格键 进行 勾选，确认勾选完毕后 敲 回车键 ）
和你 确认创建vue项目的版本（选项分别 为vue2.0 以及 vue3.0）
这里我们 选 2.x
和你确认 路由器是否使用 history 模式？（Y：确认 / N：取消）
这里我们 输入 Y 回车
和你确认 sass 版本
这里我们 选 Sass/SCSS (with dart-sass)
和你确认 语法检测 配置
这里我们 选默认的第一个
和你确认 触发语法检测的方式
这里我们 选 Lint on save (保存时就触发)
和你确认 配置文件放置位置
这里我们 选 In dedicated config files (单独放置)
和你确认 是否把刚刚配置过的信息 保存为预设模板（保存为预设后，以后在创建项目时就可以选择这个预设模板进行创建）
这里我们 输入 n (也不麻烦，多走走流程挺好的)
然后等待 直至出现下面内容为 创建成功！
然后执行 启动命令 成功!
四、vue 项目结构分析
-
buid：打包配置的文件夹
-
config：webpack对应的配置
-
src：开发项目的源码
- App.vue：入口组件。
.vue文件都是组件。 - main.js：项目入口文件。
- App.vue：入口组件。
-
static：存放静态资源
-
.babelrc：解析ES6的配置文件 -
.editorcofnig：编辑器的配置 -
.postcssrc.js：html添加前缀的配置 -
index.html：单页面的入口。通过 webpack打包后，会把 src 源码进行编译，插入到这个 html 里面来。 -
package.json：项目的基础配置，包含版本号、脚本命令、项目依赖库、开发依赖库、引擎等。
