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                     // 项目基本信息
.

 

 

参考文章:https://jspang.com/posts/2017/04/10/vue-cli.html

https://cn.vuejs.org/v2/guide/index.html