vue笔记(9)vue中使用webapck

vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293
vue笔记(3)动画：https://blog.csdn.net/qq_43537987/article/details/93403565
vue笔记(4)组件化：https://blog.csdn.net/qq_43537987/article/details/93403973
vue笔记(5)ref的使用https://blog.csdn.net/qq_43537987/article/details/93404091
vue笔记(6)路由：https://blog.csdn.net/qq_43537987/article/details/93404522
vue笔记(7)watch,methods,computed使用nrm的使用：https://blog.csdn.net/qq_43537987/article/details/93404903
vue笔记(8)webapck:https://blog.csdn.net/qq_43537987/article/details/93405173

Vue.js

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

json数据中不能有注释

在普通页面中使用render函数渲染组件

• 这种方法会把app直接替代掉
  • 例如这个案例中的123是显示不出来的
• 如果想要不替换app的内容，使用正常的组件使用方法即可

<div id="app"><p>123</p></div>
<script>
  var login = {
   
      template:'<h1>登录</h1>'
  };
  var vm  = new Vue({
   
      el:'#app',
      data:{
   },
      methods:{
   },
      render:function (createElements) {
   //createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构 ，名字随便起，create。。。。都行
          return createElements(login)
      }
  })
</script>

在使用webpack构建的Vue项目中使用模板对象？

• 方法1：修改mian属性的值为vue.js(之前为runtime-common.js)

• 方法2：mian.js中修改为import Vue from '../node_modules/vue/dist/vue.js'

• 方法3：

  • main.js import Vue from 'vue'

  • webpack.config.js

    resolve: {
           
        alias: {
           
          'vue$': 'vue/dist/vue.js'
        }
      }
    

1. 在webpack.config.js中添加resolve属性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }

在webpack中配置.vue组件页面的解析（怎么配都不好使系列???！！！！！！）

版本号再次坑逼：

不管用什么样的 版本号，一定要匹配！！

 "vue-