前端进阶之初识Vue

比眉伴天荒 2022-02-12 11:29 288阅读 0赞

### Vue是一个前端Javascript框架，与React  Angular 并称为前端三大主流框架 ###

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与**单文件组件**和 **Vue ****生态系统支持的库**结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。(百度百科)

### [官方介绍][Link 1]： ###

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 2]以及各种[支持类库][Link 3]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们[制作了一个视频][Link 4]，带您了解其核心概念和一个示例工程。

## 如何学习： ##

[官网][Link 1]： [https://cn.vuejs.org/v2/guide/index.html][Link 1]

菜鸟教程：[https://www.runoob.com/vue2/vue-tutorial.html][https_www.runoob.com_vue2_vue-tutorial.html]

## ##

### 如何安装与使用： ###

官网给出的安装方式：

[https://cn.vuejs.org/v2/guide/index.html][Link 1]

尝试 Vue.js 最简单的方法是使用 [JSFiddle 上的 Hello World 例子][JSFiddle _ Hello World]。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以[创建一个 `.html` 文件][.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][https_blog.csdn.net_github_39533414_article_details_80462679]

### 二  安装vue-cli ###

命令行或者终端执行

npm install -g vue-cli

查看安装的版本

vue -V

![20190428202343829.png][]

### 三 。 初始化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

![20190428202848255.png][]

![20190428203043135.png][]

然后在浏览器中打开

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70][]

下面我们使用webstorm（或者VSCode）打开这个项目，看看里面都有什么文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1][]

文件布局：

.
    |-- 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_jspang.com_posts_2017_04_10_vue-cli.html]

[https://cn.vuejs.org/v2/guide/index.html][Link 1]

[Link 1]: https://cn.vuejs.org/v2/guide/index.html
[Link 2]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 3]: https://github.com/vuejs/awesome-vue#libraries--plugins
[Link 4]: https://cn.vuejs.org/v2/guide/index.html#
[https_www.runoob.com_vue2_vue-tutorial.html]: https://www.runoob.com/vue2/vue-tutorial.html
[JSFiddle _ Hello World]: https://jsfiddle.net/chrisvfritz/50wL7mdz/
[.html]: https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html
[https_blog.csdn.net_github_39533414_article_details_80462679]: https://blog.csdn.net/github_39533414/article/details/80462679
[20190428202343829.png]: /images/20220212/d264c6dbd80c4823b5f761071f4d940a.png
[20190428202848255.png]: /images/20220212/adee2414974949ff9bb9cc224cf615cf.png
[20190428203043135.png]: /images/20220212/81e6499506e647478404e841c3cff63a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70]: /images/20220212/46b745af1f264197b27fc2d07c8e48a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1]: /images/20220212/caebbfd83ef2447b9273312c6715dfc7.png
[https_jspang.com_posts_2017_04_10_vue-cli.html]: https://jspang.com/posts/2017/04/10/vue-cli.html