编程vue新闻阅读软件时所遇到的问题记录

ゝ一世哀愁。 2022-05-30 04:35 193阅读 0赞

**1. Chrome图片默认间距比qq浏览器小2px。**

**2. Chrome不显示非HTTPS/SSL证书网站的图标。**

**3. 编写vue.js时，在数据data里的数组未定义时，会出现push数组错误。**如下：

data: function() {
        
        return {
          title: "this a vue app",
          items: Store.fetch(),      //若为items: [], 则不会出现错误。
          newItem: ""
        }
      }
    //添加新item
        addNew: function() {
        
          var that = this;
          that.items.push({label: this.newItem,isfinished: false});
          this.newItem = "";
        }
    
    //fetch本地数据代码
    fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY || "[]"))
      }

**错误提示如下：**

Uncaught TypeError: Cannot read property 'push' of null
        at VueComponent.addNew (HelloWorld.vue?18db:33)
        at Proxy.boundFn (vue.esm.js?efeb:190)
        at keyup (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{
       "id":"data-v-656039f0","hasScoped":true,"transformToRequire":{
       "video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{
       "transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/HelloWorld.vue (app.js:934), <anonymous>:27:15)
        at invoker (vue.esm.js?efeb:2004)
        at HTMLInputElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1802)

***注释***：不知道为什么本地数据为空时，不能将”\[\]”赋给数据，或者赋值后还是出现了错误？

# 此问题已解决！ #

**原因：**  
items数组未定义。

**解决办法：**  
push数组之前加一行代码：`that.items = that.items || []`。修改后的部分代码如下：

//添加新item
        addNew: function() {
        
          var that = this;
          that.items = that.items || []
          that.items.push({label: this.newItem,isfinished: false});
          this.newItem = "";
        }

**4. vue打包项目放到服务器上，需要修改index.html路径**

**必须要配置的就是/config/index.js**

> 在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath这个键，并且这个东西还出现了两次，我第一次打包的时候，只是修改了最下面的assetsPublicPath，将它从’/’变为了./。

**修改打包后的index.html文件里的js和css文件正确路径：**

//去掉下面static前的"/"。
     <script type="text/javascript" src="/static/js/manifest.2ae2e69a05c33dfc65f8.js"></script>

**然后执行npm run build，打包成功之后，可以看到项目中会多dist文件夹，里面有一个static文件夹和index.html，然后将dist目录下的文件拷贝到服务器下。**

**5. vue2.0 引入font-awesome**

网上的大部分教程复杂而且难看懂，其实两步就能搞定。

先cnpm install font-awesome –save引入依赖

然后在main.js引入 font-awesome/css/font-awesome.min.css 即可。

import 'font-awesome/css/font-awesome.min.css'

> 试过很多引用字体图标的办法，但是每次都只能显示一个小方框。只能有图片代替图标了。F！

**6. vue注意事项**

**vue的编写十分严格，会报warn，但又不会影响网页加载：**

*  function后面和()后面都要写一个空格，否则会报warn。

this.$nextTick(function () {
        })     //正确
    this.$nextTick(function(){
        })       //错误

*  v-for循环一定注意要加上key的值，否则也会报warn（微信小程序好像也是这个德行）：

**7. 浏览器的preview的JSON数据需要用querystring.parse进行格式化**

**8. cheerio 在使用的时候如果包含有中文字体，用html方法中文被转换成未知字体**

var $ = cheerio.load("<h1><p>你好</p><em>Hello,World!</em></h1>");
    var title = $('h1').text();    //你好Hello,World!
    var cnt = $('h1').html();//<p>你好</p><em>Hello,World!</em>

**解决：**  
引入he模块，转码

var he = require('he');
    he.decode(str);

**9. vue路由嵌套跳转页面**

1.子组件路由配置path不要加 /
    2.父组件要有router-view占位，
    3.如果子组件要渲染父组件整个页面，既然用不到父组件的内容何必要定义成父子组件呢，换成兄弟组件
    4.如果父子组件，子组件要渲染父组件整个页面，那子组件只能定位了，设置z-index，覆盖父组件。

**10. node爬取今日头条数据的时候，在一定时间内只能爬一次。很烦。**

**11. vue2.0的axios使用**  
需要在config/index.js添加代理：代码如下

proxyTable: {
          '/api': {
            target: 'http://127.0.0.1:1337/', //设置调用接口域名和端口号别忘了加http
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
                    // 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
            }
          }
        },

**12. vue2中src实现数据绑定遇到的问题**  
在vue2.0中，src实现数据绑定稍不留神就不成功。假定value.src是绑定的数据。  
常见错误写法1：

错误之处在于：  
1.属性值数据绑定应该用v-bind，应该写成v-bind:src=””  
2.直接用引号”value.src”会报错，取不到值。

常见错误写法2：

常见错误写法3：

以上均会报错。2种正确写法：

**13. router-link传参方法**

**动态传参**

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)

接收参数页面使用：this.$route.query.id获取参数值  
**注意**：\*此方法若参数值为url会导致url值被转为%号之类的符号。

**13. 每次进入页面刷新**  
mounted只在第一次进入页面时刷新，activated时每次进入都刷新，watch是第二次进入时刷新，且mounted和watch只能用一个。

mounted(){
    
    },
    watch: {
      '$route': 'initData'
    },
    //当然也可以用这个 不用watch和mounted().
    activated() {
        const _this = this;
        _this.initData();
    },

**14. [history模式跳转链接的404刷新空白][history_404]**

//解决刷新404，停留在当前页面并刷新
    //res.sendFile默认设置解析header为Content-Type:text/html; charset=utf-8
    app.use(function(req, res, next) {
        
       res.status(404).sendFile(path.join(__dirname,'../dist/index.html') );
      // console.log(res.status())
    });

> res.sendFile()的性能和express.static()是一样的。  
> 使用中间件提供静态文件  
> 在开发过程中，可以使用 res.sendFile() 提供静态文件。但是，请勿在生产环境中执行此函数，因为它必须针对每次文件  
> 请求读取文件系统，所以会产生严重的延迟，影响应用程序的总体性能。请注意，res.sendFile() 并非通过效率要高很多的 sendfile 系统调用来实现的。  
> 因此，建议使用 serve-static 中间件（或者等效项），该中间件经过优化，用于为 Express 应用程序提供文件。  
> 还有一个更好的选项，就是使用逆向代理提供静态文件；请参阅使用逆向代理以了解更多信息。

**15. [vue-cli项目打包出现空白页和路径错误问题][vue-cli]**

**16. [axios 详细使用方法 及跨域请求（反向代理）的处理][axios _]**

**17. [vuejs怎么在服务器部署？][vuejs]**

**18. [ vue-cli打包过程及打包后与node交互实现][vue-cli_node]**

[history_404]: http://www.expressjs.com.cn/starter/faq.html
[vue-cli]: https://www.cnblogs.com/wanf/p/7871787.html
[axios _]: https://blog.csdn.net/feifanzhuli/article/details/77990661
[vuejs]: https://www.zhihu.com/question/46630687/answer/157166318
[vue-cli_node]: https://blog.csdn.net/shuhaha/article/details/78261777