前端进阶 之 初识Vue
Vue是一个前端Javascript框架，与React Angular 并称为前端三大主流框架
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。(百度百科)
官方介绍：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如何学习：
官网： https://cn.vuejs.org/v2/guide/index.html
菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html
如何安装与使用：
官网给出的安装方式：
https://cn.vuejs.org/v2/guide/index.html
尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>如果不熟悉Node.js 的构建工具，不建议使用vue-cli
如果已经了解了nodejs，可以使用vue-cli开发，更为方便
一 。 安装nodejs
这里可以看一下我的这一篇博客。或者百度，google
https://blog.csdn.net/github_39533414/article/details/80462679
二 安装vue-cli
命令行或者终端执行
npm install -g vue-cli查看安装的版本
vue -V
三 。 初始化vue
先进入你要安装的路径，然后执行
vue init webpack使用webpack模版，接下来就是输入项目名称和一些其他的配置
➜ SmileVue vue init webpack smilevue
? Project name smilevue
? Project description A Vue.js Project
? Author zixuan
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your 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? (recom
mended) npm项目名称自己随便命名都行，其他直接回车就行了，也可以参考我上面的配置(注意：文件名必须是小写字符)
然后进入目录
cd silmevue
npm run dev
然后在浏览器中打开
下面我们使用webstorm（或者VSCode）打开这个项目，看看里面都有什么文件
文件布局：
.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.