网站导航
> 文档中心 > Vue介绍、环境准备、快速入门

Vue介绍、环境准备、快速入门

文档中心 2022-05-25 14:23:19 42

文章目录

  • 1. 概述
  • 2. MVVM模式
  • 3. 环境准备
    • _1. 开发工具
      • _1.1 安装
        • 官网下载 https://code.visualstudio.com/
      • _1.2 设置中文
      • _1.3 安装vue插件
    • _2. node.js
      • _2.1 下载Node.js并安装
        • https://nodejs.org/en/
      • _2.2 NPM
      • _2.3 切换镜像
    • _3. webpack
        • 中文官方网站：https://www.webpackjs.com/
        • 为什么需要打包？
        • 安装步骤
        • 查看版本
    • _4. vue-cli 3.0
        • 官网：https://github.com/vuejs/vue-cli
        • 安装
    • _5. 安装调试插件
        • 1. 下载插件
        • 2. 进入vue-devtools文件夹，安装依赖包
        • 3. 打包
        • 4. 修改vue-devtools\shells\chrome\manifest.json，把文件里的"persistent":false改成true
        • 5. 打开chrome浏览器，打开更多工具>扩展程序
  • 4. 极速入门

1. 概述

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

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以轻量易用著称，vue.js和React.js发展速度最快，vue同时具备angular和react的优点,轻量级、api简单、文档齐全、简单强大

作者：

尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。

本科读的是艺术史，研究生阶段学习Design & Technology。

1 ![img](assets/logo.png)

2. MVVM模式

  • M：即Model，模型，包括数据和一些基本操作

  • V：即View，视图，页面渲染结果

  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

  • 只要我们Model发生了改变，View上自然就会表现出来。

  • 当用户修改了View，Model中的数据也会跟着改变。

MVVM模式把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

请添加图片描述

3. 环境准备

_1. 开发工具

VSCode（ Visual Studio Code）是微软出的一款轻量级代码编辑器。Visual Studio Code内置了对JavaScript、TypeScript和Node.js语言的支持，并且为其他语言如C++、 C#、Python、PHP等提供了丰富的扩展库和运行时。

_1.1 安装

官网下载 https://code.visualstudio.com/

_1.2 设置中文

  1. 先按ctrl + shift + p，然后在搜索框输入dispaly，选择下面的选项

Vue介绍、环境准备、快速入门

  1. 然后安装语言选项，安装完成重启vscode软件即可

Vue介绍、环境准备、快速入门

请添加图片描述

_1.3 安装vue插件

请添加图片描述

_2. node.js

Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的

V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多

前端框架，包括Jquery、AngularJS、VueJs都有。

_2.1 下载Node.js并安装

https://nodejs.org/en/

推荐下载lts版本，安装后验证

Vue介绍、环境准备、快速入门

_2.2 NPM

安装完Node就包含了NPM

Vue介绍、环境准备、快速入门

_2.3 切换镜像

npm默认的仓库地址是在国外网站，建议切换设置到淘宝镜像。

  1. 安装nrm，-g代表全局安装

    npm install nrm -g
    npm root -g // 查看全局安装的根目录地址

  2. 查看npm的仓库列表,带*的就是当前选中的镜像仓库

    nrm ls

  3. 切换镜像

    nrm use taobao

  4. 测速

    nrm test npm

建议重启电脑

_3. webpack

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

中文官方网站：https://www.webpackjs.com/

请添加图片描述

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependencygraph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

为什么需要打包？

  • 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。

  • 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。

  • 将代码打包的同时进行混淆，提高代码的安全性。

安装步骤

webpack支持全局安装和本地安装，官方推荐是本地安装

npm install --save-dev webpack -g

webpack 4+ 版本，你还需要安装 CLI

npm install webpack webpack-cli --save-dev -g

查看版本

webpack -v

如果查看版本出现类似提示：“webpack One CLI for webpack must be installed” ，则执行如下命令

npm install webpack-cli -g

_4. vue-cli 3.0

vue官方提供了一个快速搭建vue项目的脚手架：vue-cli，使用它能快速的构建一个web工程模板。

官网：https://github.com/vuejs/vue-cli

安装

npm install -g vue-cli

_5. 安装调试插件

1. 下载插件

git clone https://github.com/vuejs/vue-devtools

2. 进入vue-devtools文件夹，安装依赖包

npm install

3. 打包

npm run build

请添加图片描述

打包完成后，vue-devtools\shells\chrome\src中会产生上图中的js文件

4. 修改vue-devtools\shells\chrome\manifest.json，把文件里的"persistent":false改成true

Vue介绍、环境准备、快速入门

5. 打开chrome浏览器，打开更多工具>扩展程序

请添加图片描述

请添加图片描述

4. 极速入门

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head><body><div id="app">   {{msg}}</div></body></html><script>    new Vue({ el: '#app', data:{     msg: 'hello vue.'}   });</script>
标签：