vue怎么导入自己写的js文件

JavaScript09

vue怎么导入自己写的js文件,第1张

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的开发环境之前,一定一定要先下载node.js,,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64 。

Idea添加Vue插件方法,

点击file_>settings_>Plugins然后搜索Vue

点击安装!

我的安装成功,

创建项目

file_>new_>Project_>Static Web_>Vue.js

选择好文件夹点击next然后就一直出不来,特别慢,然后没有等,网上说是版本问题,说换个版本。

于是使用https://plugins.jetbrains.com/plugin/9442-vue-js/versions

去下载版本,起初随便找了个版本,下载下来安装,结果报错!报错内容原因为版本和idea版本不匹配!

重新下载,那我想也不能还是大海捞针一样继续乱找,然后看了下刚才的下载页,第一行也就算是表头吧,人家第一列是vue的版本,第二列是匹配的idea版本,哈哈哈,这下就简单了,直接找到自己对应的版本的idea,下载相应的vue版本即可!

例如我的是2019.3.3然后下载的其中之一,

记得好像是vue193.6494.5,上面的方法下载完成,安装成功!

file_>settings_>plugins_>点击右上方的设置按钮_>Install Plugin from Disk选择下载的安装包。安装成功!

创建项目这次点击next,比较快的就过去了。