【Vue入门之项目环境搭建】

一.Vue 介绍和Vue 开发环境搭建

1.1 Vue官网

Vue 是什么：Vue.js 是一套由美籍华人（尤雨溪）开发的相应式系统，前端开发库。
2014 年2 月尤雨溪开源了前端开发库Vue.js。
2016 年9 月3 日，尤雨溪以技术顾问的身份加盟阿里巴巴Weex 团队。
他全职投入Vue.js 的开发，立志将Vue 打造成Angular/React 平级的世界顶级框架
Vue 的核心库只关注视图层，非常容易和其他库整合，
Vue 非常适合开发复杂单页应用
Vue 可实现数据和视图的双向绑定
[Vue官网](https://cn.vuejs.org/)

1.2 Vue的特点

1. 轻量级框架，vue 提供MVVM 双向数据绑定，依赖模板表达式和计算属性，使用简单快捷。
2. Vue 通过指令将数据和页面进行交互。
3. vue 可以将一个web 开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发
4. 与传统Web 页面通过链接切换页面（重新刷新页面）不同，Vue 通过客户端路由实现页面的平滑切换。
5. Vue 的界面属于响应式，在各种设备上都具有好的显示效果

1.3 npm简介

真实项目场景中，使用Vue 开发项目时，使用npm 安装，Npm 和WebPack 通过预编译让前端JavaScript 可以直接使用NodeNPM 安装的其他库一起使用，形成生态系统，就如同maven一样，我们可以很方便的使用其他人已经写好的库。

1.3.1 npm 与WebPack简单介绍:

npm: 是随同Nodejs 一起安装的包管理工具(NodeJs 环境安装→Npm 就有了)
NodeJs 是什么?
NodeJs 是一个基于Chrome V8 引擎的JavaScript 运行环境，它既不是语言，也不是框架，它是一个平台，这个平台编程语言采用的是javascript，可以支持javascript 的最新的高级语法，这是浏览器做不到的。如果jvm，变成语言用的是java 而已，而Npm是随同NodeJs 安装的包管理工具，通过Npm 可以很方便的引用第三方采用js 编写的项目, 是全球最大的开源库生态系统.
Webpack: Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。当webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
Webpack 官网
Vue环境搭建

二.第一个Vue项目

2.1 创建Vue项目

1.环境搭建好以后，打开cmd(以管理员身份打开，避免某些权限问题)
输入指令vue ui,打开图形化界面创建项目

vue ui

2.在浏览器界面打开Vue项目管理器，在需要的位置创建项目

3.项目创建完成，打开vscode，在项目位置新建终端(其作用与cmd窗口一样，只是为了方便，当然你也可以在cmd窗口输入指令)

4.点击在终端输入npm run serve 命令启动项目

npm run serve

点击链接，或浏览器访问8080端口(默认是8080端口)，即可进去项目

5.在终端命令窗口按住ctrl+c，选择y,可以终止进程

2.2 Vue项目目录

• node_modules : 项目依赖(内置了webpack), 在当前目录下通过npm 安装的非全局依赖库都会放在这个目录下。
• public: Vue3.x :静态资源目录, 相当于vue-cli2.x 中的static, public 通常放不会变动的文件
• src: 源码目录
• assets: 目录: Vue3.x 的静态资源目录，assets 目录中的文件会被webpack 处理解析为模块依赖，只支持相对路径形式。
• components: vue 组件，一个Vue 组件对应一个Vue 示例
• App.vue: 应用默认主组件，它的vm 示例控制的就是index.html 中的div 区域
• main.js: 项目入口文件，webpack 编译打包就是从此文件开始，换言之，所有你用到的资源，都应该从这里面import 引入，才能被打包进项目。最终打包的js 文件会自动插入到index.html 页面中