vue设置全局变量 | vue2全局变量

1. vue2全局变量

vue将给变量赋值为方法需要引用的数据类型为（1） 基本数据类型：number、string、boolean、null、undefined、symbol（ES6）（2） 引用数据类型：object、function（函数实际也是对象），要修改固定的字符串并用方法重新编写就可以实现，将变量赋值为方法。

（1） 当一个方法执行完后，不再引用的变量会被销毁，被引用的变量不会被销毁，不会造成资源浪费和多余的性能消耗；

（2） 定义一个变量时，这个变量会被自动分到对应内存中（栈内存和堆内存），提高变量查询的速度；例如，定义一个未知大小的变量（如：对一个对象的增加删除），放在较小内存的栈中，栈大小是有默认值的，如果申请的临时变量太大的话就会超过栈大小，造成栈溢出，很明显会影响性能和查找速度。反之，如果一个固定大小的变量放到堆内存中，实际堆内存是可以申请大小的（相当于一个自适应的网页），只要不超出内存大小；很明显会造成资源利用不合理。

2. vue 定义全局变量

一、安装node环境

1、下载地址为：https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

　　

3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

　　

　　检查是否安装成功：

　　

二、搭建vue项目环境

1、全局安装vue-cli

npm install --global vue-cli

　

2、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

说明：

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

3、进入项目：cd vue-demo，安装依赖

　　

　　安装成功后，项目文件夹中会多出一个目录：　node_modules

　　

4、npm run dev，启动项目

项目启动成功：

三、vue项目目录讲解

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；

2）check-versions.js ==> 检查npm，node.js版本；

3）utils.js ==> 构建相关工具方法；

4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js ==> webpack基本配置；

6）webpack.dev.conf.js ==> webpack开发环境配置；

7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；

2）index.js ==> 项目配置文件；

3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

3. vue全局变量 其他页面能调用

vue-cli webpack全局引入jquery

　　1、首先在package.json里加入，

　　然后 nmp install

　　2、在webpack.base.conf.js里加入

　　3、在module.exports的最后加入

plugins: [

　　new webpack.optimize.CommonsChunkPlugin('common.js'),

　　new webpack.ProvidePlugin({

　　jQuery: "jquery",

　　$: "jquery"

　　})

]

　　4、然后一定要重新 run dev

　　5、在main.js 引入就ok了

　　在.vue文件中引入第三方非NPM模块

　　vue-cli引入外部文件

在 webpack.base.conf.js 中添加externals

　　externals 中 swiper 是键，对应的值一定的是插件 swiper.js 所定义的变量 Swiper :

　　之后再在根目录下的index.html文件里引入文件：<script src="static/lib/swiper.js"></script>

　　这样子就可以在需要用到swiper.js的文件里加入这行代码：import Swiper from 'swiper'，这样就能正常使用了。

4. vue3 全局变量

1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好）

2、在目标文件夹下打开终端3、执行cnpm install vue-cli -g 全局安装运行vue查看安装是否成功4、运行vue init webpack(注：模板名称) sell2(注：项目名称)5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，然后进行阻止检索的方法，然后在重新cnpm install就好*（这种方法需要安装完依赖项先运行一次然后删除node_modules子文件，webstorm打开项目，禁止检索node_ module文件夹，然后在删除该文件夹，重新安装即可）

7、运行项目执行 npm run dev (注：此时不能用cnpm来运行，必须是npm)8、将需要的资源放进项目9、我们需要用到路由功能 所以需要安装vue-router安装方法：vnpm install vuve-router --save10、在build/devs-erver.js下编写自定义变量和路由功能这样在运行项目下就可以得到自己想要的json数据，这样路由就配置成功，并且得到了自己想要的数据11、在写代码之前现在html文件下引入初始化样式（保持样式的统一和美观）

12、调用组件的方式-

5. vue中的全局变量

vue文件中定义全局环境变量可以设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块这样就达到了修改全局变量的目的了。

6. vue定义全局变量和全局方法

自定义全局变量 config.protocol（定义全局变量。）

7. vue 局部变量

vue.conf注册全局变量。就可以全局使用了。

8. Vue全局变量

只能用postcss了.就像操作DOM节点一样操作CSS节点

9. vue给全局变量赋值

vue严格模式开启：

1.首先要开启严格模式。 用户实例化Store的时候传入strict为true就开启了严格...

2.接收参数 接收参数,如果strict就调用enableStrictMode方法

3enableStrictMode实现

4.store._committing分析 刚开始的时候,这个变量设置为false,如果要改变数据包装一个_withCommit方法，执行方法之前，将this._committing设置true,执行完了之后改回false....