vue项目打包后css背景图路径不对的问题

问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比 图一：使用npm run dev命令访问   图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图   解决办法： 解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

1
publicPath:'../../'

添加位置为如下图：   然后重新执行 npm run build 命令，即可成功显示图片   from:https://www.cnblo […]

npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置

备注：<=> 意为等价于； 1、npm install <=> npm i --save   <=> -S --save-dev  <=> -D npm run start <=> npm start  // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev  <packname>   工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader… 3、npm i --save <packname>  项目（运行时、发布到生产环境时）依赖；例：antd , element,react… 4、对应关系如下（至于我们啥时候用--save、啥时候用--save-dev 感觉是个规范问题，用反了项目一样可以跑起来（对于安装依赖正确时），但会给 […]

vue 安装遇到权限问题 解决

解决方案： npm config set user 0 npm config set unsafe-perm true   报错： Unable to save binary /var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor/linux-x64-64 : { Error: EACCES: permission denied, mkdir '/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/node-sass/vendor' at Object.mkdirSync (fs.js:753:3) at sync (/var/lib/jenkins/workspace/uploadH5_download_app/download/node_modules/mkdirp/index.js:71:13) at Function.sync (/var/li […]

Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: (newVal, oldVal) => {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

  箭头函数要改为function的形式，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
</template>
<script>
export default{
data(){
return {
isLogin: false
}
},
watch:{
isLogin: function(newVal, oldVal) {
newVal && this.updateLogin()
}
},
methods:{
updateLogin(){
console.log(`update login`)
}
}
}
</script>
<style scoped>
</style>

    from:https://blog.csdn.net/liubangbo/article/details/115242420

html直接引用vue和element-ui的方法

代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button round @click="visible = true">圆角按钮</el-button>
        <br>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <br>
        <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"
            active-text="按月付费" inactive-text="按年付费">
        </el-switch>
        <br>
        <el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
            placeholder="选择时间范围">
        </el-time-picker>
        <el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" placeholder="选择时间范围">
        </el-time-picker>
        <br>
        <el-progress type="circle" :percentage="0"></el-progress>
        <el-progress type="circle" :percentage="25"></el-progress>
        <el-progress type="circle" :percentage="100" status="success"></el-progress>
        <el-progress type="circle" :percentage="70" status="warning"></el-progress>
        <el-progress type="circle" :percentage="50" status="exception"></el-progress>
        <br>
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
        <br>
        <el-steps :active="1" finish-status="success">
            <el-step title="已付款"></el-step>
            <el-step title="退款中"></el-step>
            <el-step title="已退款"></el-step>
            <el-step title="待结算"></el-step>
            <el-step title="已结算"></el-step>
        </el-steps>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>
</html>

效果如图： 总结 到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！   from:https://www.jb51.net/web/743299.html

说说 vue 父子组件加载顺序

面试提问：说说 vue 父子组件加载顺序 这我知道答案 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted 父 mounted 子组件若有 props 的话更新顺序是四步，若无的话两步不触发父亲的钩子。 父 beforeUpdate 子 beforeUpdate 子 updated 父 updated 父组件更新顺序是 父 beforeUpdate 子 deactivated 父 updated 销毁过程是 父 beforeDestroy 子 beforeDestroy 子 destroyed 父 destroyed 再问，如果有多个子组件呢？我不太能确定。 加载多个子元素 回头写了一个简单的vue视图，父调用子，以下代码复制可用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <title>Form Demo</title>
</head>
<body>
    <div id="app">
        <input-group :forms="forms" v-for="(forms, index) in options" :key="index"></input-group>
    </div>
 
    <!-- Vue.js v2.6.11 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('input-group', {
            props: ['forms'],
            beforeCreate() {
              console.log('child beforeCreate');
            },
            created() {
              console.log('child created');
            },
            beforeMount() {
              console.log('child beforeMount');
            },
            mounted() {
              console.log('child mounted');
            },
            template: `<div>
                <template v-for="item in forms">
                    <input type="text" v-model="item.data">
                </template>
            </div>`
        })
 
        let options = []
        for (let i = 0; i < 2; i++) {
            for (let j = 0; j < 2; j++) {
                options[i] = options[i] || [];
                options[i].push({
                    data: '',
                })
            }
            
        }
        var app = new Vue({
            el: '#app',
            beforeCreate() {
              console.log('parent beforeCreate');
            },
            created() {
              console.log('parent created');
            },
            beforeMount() {
              console.log('parent beforeMount');
            },
            mounted() {
              console.log('parent mounted');
            },
            data: {
                options: options,
            },
        })
        window.app = app;
        console.log(app);
    </script>
</body>
</html>

  控制台打印结果如下

1
2
3
4
5
6
7
8
9
10
11
parent beforeCreate
parent created
parent beforeMount
child beforeCreate
child created
child beforeMount
child beforeCreate
child created
child beforeMount
(2) child mounted
parent mounted

  能得出结论，第一个子元素在 beforeMount 后 […]

npm ERR! Unexpected end of JSON input while parsing near

You are trying to create a new angular, react, vue app, and you end up with an error message saying: npm ERR! Unexpected end of JSON input while parsing near There’s a high chance that your npm cache been damaged. Try:

1
npm cache clean --force

  If you are a windows user, try deleting all files in this folder:

1
C:\Users{{your-username}}\AppData\Roaming\npm-cache

  Then…

1
npm cache verify

  If that doesn’t work, try updating to the lastest (understand the risks […]

Vue 魔法师 —— 将 API “类化”

前言 【类】和【接口】是 JavaScript 未来的方向，我们的 API 调用也将如此，朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师，如何将 API “类化”？ 万物皆模块，万物可归类。闲言少叙，直接正题。 分类 API 环境： Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建

1
vue create vue-api-module

得到如下目录

1
2
3
4
5
--src
----store
------index.js
----App.vue
----main.js

  然后新建文件 api.js 如下，

1
2
3
4
5
6
7
--src
----services
------api.js
----store
------index.js
----App.vue
----main.js

  基础类 API 我们先创建一个基础类如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class BaseApiService {
  baseUrl = "https://jsonplaceholder.typicode.com";
  resource;
 
  constructor(resource) {
    if (!resource) throw new Error("Resource is not provided");
    this.resource = resource;
  }
 
  getUrl(id = "") {
    return `${this.baseUrl}/${this.resource}/${id}`;
  }
 
  handleErrors(err) {
    // 处理错误：
    console.log({ message: "Errors is handled here", err });
  }
}

  baseUrl：设置请求根路径； resource：来源； getUrl：获取链接函数，包含 baseUrl、resource、id； handleErrors：处理错误函数； 只读类 API 然后，我们再创建一个子类：包含 fetch、get 只读方法。 [cray […]