vue引用并使用本地js(局部引用,全局引用)

JavaScript030

vue引用并使用本地js(局部引用,全局引用),第1张

common.js 文件

common.js 文件

common.js 文件

common.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

vue中引入在线JS(链接型的js、url类型的js)

vue项目中引用并使用本地js

1. 首先我们要改变我们要映入的外部js文件,改成以下这个格式。

代码:<pre class="html">function realconsole(){ alert("hello.thanks use me")} export { realconsole } </pre>

2. 到我们的寄主那里,我们需要导入仿造的文件,方法是这样的:

代码:<pre class="html">&lttemplate&gt&ltdiv class="teslist"&gt&ltbutton @click="methods1"&gt显示console&lt/button&gt&lt/div&gt&lt/template&gt&ltscript src="../../lib/myconsole.js"&gt&lt/script&gt&ltscript&gtimport { realconsole } from '../../lib/myconsole.js' export default { methods:{methods1:function(){ realconsole()} }} &lt/script&gt&ltstyle&gt.teslist { } &lt/style&gt</pre>

注意红色叉的部分,那是我们es5的写法,绿色才是正确的,下面是效果图

vue项目导入本地json文件的2种方法

一、通过网络请求导入

步骤:

1.找到vue项目目录下的build/webpack.dev.conf.js文件

2.

3.

4.在页面钩子函数触发时,调用

created() {

        this.$http.get('/api/customs_cut_mode').then((response) =>{

          response = response.body

          if (response.errno == ERR_OK||response.errno ==0) {

            this.customs_cut_mode= response.data

          }

        })

      }

二、通过ES6导入本地json

1.将json数据放入指定目录。

2.在页面引入

import   customs_cut_mode   from '../../common/Alljson/customs_cut_mode.json'

3.页面使用

mounted() {

      this.customs_cut_mode= customs_cut_mode

      // console.log( this.customs_cut_mode)

    },