初始Vue.js,安装vue.js的方式

最新推荐文章于 2022-04-26 10:12:55 发布

飞飞笨笨

最新推荐文章于 2022-04-26 10:12:55 发布

阅读量356

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_41525746/article/details/109683031

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue是一套基于MVVM模式的用于构建用户界面的JavaScript框架，它是以数据驱动和组件化的思想构建的，它是由前谷歌人员尤雨溪开发的。

ViewModel是vue框架的核心，他是一个Vue实例。Vue实例作用于某一个HTML元素上的，这个元素可以是HTMl的body元素，也可以是某个指定了id的元素。

当创建了ViewModel后，从View侧看，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更改Model中的数据时，Data BIndings工具会帮我们更新页面中的DOM元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue.js</title>
        <script src="vue"></script>
    </head>
    <body>
        <!--view-->
        <div id="app">
            <p>{{message}}</p>
        </div>
    <script>
        //Model
        var modelData = {
            message:'hello vue.js'
        }
        //创建一个vue实例，即ViewModel,它连接View与Model
        new Vue({
            el:'#app',
            data:modelData
        })
    </script>
    </body>
</html>

安装vue.js

Vue支持所有兼容ECMAScript5（es5）的浏览器（目前主流的浏览器均支持ECMAScript5），但不支持IE8及以下版本，应为Vue使用了不被IE8支持ECMAScript5特性。

Vue的安装可以使用三种方式：

使用独立版本
使用CDN（内容分发网络）方式
使用NPM方式

使用独立版本

直接从Vue官网（https://vuejs.org）上下载vue的JavaScript脚本文件，然后再页面中通过<script>标签引入。官方提供两个不同的版本：开发版本和生产版本。

开发版本

包含了完整的警告和调试模式，用于开发阶段。开发版地址https://vuejs.org/js/vue.js.

生产版本

删除了警告，并进行了代码压缩，文件较小，用于产品发布后的正式运行环境。生产版地址https://vuejs.org/js/vue.min.js.

<script src="vue.js"></script>

使用CDN方式

CDN（Content Delivery Network）即内容分发网络。CDN是构建再现有网络基础之上的智能虚拟网络，依靠部署再各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥堵，提高用户访问的响应速度和命中率。

使用CDN方式来安装Vue框架，实际上就是选择一个提供Vue.js链接的稳定的CDN服务商。这里推荐两个国内比较稳定的CDN。

Staticfile CDN 网址：http://www.staticfile.org/首页有提供搜索框，直接输入vue即可。

开发版本的Vue的URL为https://cdn.staticfile.org/vue/2.6.10/vue/vue.js

生产版本的Vue的URL为https://cdn.staticfile.org/vue/2.6.10/vue/vue..min.js

BootCDN

网站为https://www.bootcdn.cn/，一样直接搜索即可

开发版本的Vue的URL为https://cdn.bootcss.com/vue/2.6.10/vue/vue.js

生产版本的Vue的URL为https://cdn.bootcss.com/vue/2.6.10/vue/vue..min.js

国外的CDN可以使用如下两个：

https://unpkg.com

https://cdnjs.cloundflare.com

使用NPM方式

NPM的全称是Node Package Manager,是一个Node.js是一个包管理和分发工具，也是整个Node.js社区最流行、支持第三方模块最多的包管理器。

Node.js已经继承了NPM，只要安装了Node.js，NPM也就异并安装好了。进入Node.js官网（https://nodejs.org），我之前有文章特别介绍了安装教程。

有两个版本LTS和Current版本，前者长期稳定后者是最新版有最新版特性可能会有一些bug。

建议安装Visual Studio Code进行开发

默认是英文如果需要按下Ctrl+Shift+p组合键，输入config，或者按Ctrl+p组合键，输入>config，选择Configure Display Language

接下来安装Vetur插件。该插件支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多主流的前端开发脚本和插件，如Sass和TypeScript等，接下来安装ESLint，他是一个JavaScript语法规则和代码风格的检查工具。可以帮助我们轻松写出高质量的JavaScript代码。

安装vue-devtools

vue-devtools是基于Google chrome浏览器的基于调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具调试代码。

可以在github下载后进入主目录执行npm install，下载第三方依赖，下载完成后值npm run build编译源程序

进入shells子目录，编译manifest.json,把

"persistent":false

改为true

打开chrome更多工具拓展程序选择加载主目录下的shells\chrome文件夹即可