方法 1: user.js などの一般的な js ファイルをインポートする
1.1、属性とメソッドは変数内に記述されます
const user={
login:true,
isLogin:function(data){
console.log("展示用户登录信息")
}
}
export default user;
1.2、分けて書くことも可能
function isLogin(data){
console.log("展示用户登录信息")
}
function getMobile(data){
console.log("22222222")
}
export default {
isLogin,
getMobile
}
.vue ページで引用:
<script>
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import userfrom '@/common/user.js';
// 相对路径
import user from '../../common/user.js';
export default {
...
methods: {
test(){
user.isLogin() //具体使用
}
}
}
</script>
知らせ
- js ファイルは、
/
最初はインポートをサポートしていません
方法2:エントリーファイルmain.jsにuser.jsを入れてグローバルメソッドにする
import user from './common/user.js';
Vue.prototype.$user = user;
.vue ページで引用:
<script>
export default {
...
methods: {
test(){
this.$user.isLogin()//具体使用
}
}
}
</script>
方法 3: 暗号化された md5.js ファイルなど、サードパーティのモジュール化された .js ファイルをインポートして、共通フォルダーに配置し、通常の .js ファイルとして参照できます。モジュール化されたファイルは、module.exports を介してオブジェクトとして公開されます。 :
var exports = createMethod();
if (COMMON_JS) {
module.exports = exports;
} else {
root.md5 = exports;
if (AMD) {
define(function () {
return exports;
});
}
}
.vue ページで引用:
<script>
import md5 from '../../common/md5.js';
export default {
...
methods: {
test(){
let sign = md5(getSignStr(arrKeys, arrValues)).toUpperCase();
}
}
}
</script>
方法 4: uniapp によって開発された H5 は、nomodule.js などのサードパーティ製の非 modular.js ファイルをインポートし、上記のように共通フォルダーに配置される、オブジェクトとして公開されている module.exports のない純粋な js ファイルです。そのままインポートすると見つからないというメッセージが表示されるので、nomodule.js を static フォルダに入れると、uniapp が H5 をリリースすると static ファイル以下の内容がコンパイルされなくなり、グローバル js を entry.html ファイルと .vue にインポートします。ページから直接引用するだけです
4.1、nomodule.js
function isNoModule(data){
console.log("3333333")
}
4.2、entry.html ファイルにグローバル js を導入
<script charset="utf-8" src="<%= BASE_URL %>static/nomodule.js"></script>
4.3. .vue ページでの参照
<script>
export default {
...
methods: {
test(){
isNoModule();
}
}
}
</script>