2.1 基本使用

  1. #1.安装vue
  2.    运行npm i vue@2.6.11将vue安装为运行依赖
  4. #2.main.js
  5. /*
  6.  注意：在webpack中使用 import Vue from 'vue'导入的Vue构造函数功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式；
  7.  import Vue from 'vue' 导入包的规则：
  8.    1. 找项目根目录中有没有 node_modules 的文件夹
  9.    2. 在node_modules中根据包名，找对应的vue文件夹
  10.    3. 在vue文件夹中，找一个叫做 package.json 的包配置文件
  11.    4. 在package.json文件中，查找一个 main 属性【main属性指定了这个包在被加载时候的入口文件】，这里我们发现入口文件为vue.runtime.common.js，并不是vue.js文件
  13.  解决方案有两种：
  14.    1.在webpack.config.js下新增配置：
  15.        resolve: {
  16.             alias: {
  17.                 'vue$': 'vue/dist/vue.js'
  18.             }
  19.         }
  21.         然后使用 import Vue from 'vue'  就可以了
  23.    2.手动修改导包的路径为：import Vue from 'vue/dist/vue''，此时无需修改配置文件
  24. */
  26. import Vue from 'vue'
  28. var login = {
  29.    template: '<h1>这是login组件，是使用网页中形式创建出来的组件</h1>'
  30. }
  32. var vm = new Vue({
  33.     el: '#app',
  34.     data: {
  35.         msg: '123'
  36.     },
  37.     components:{
  38.         login
  39.     }
  40. })
  42. #3.index.html
  43. <div id="app">
  44.     <p>{{msg}}</p>
  45.     <login></login>
  46. </div>
  48. #4.webpack.config.js
  49. resolve: {
  50.     alias: {
  51.         'vue$': 'vue/dist/vue.js'
  52.     }
  53. }
  55. #5.package.json、.babelrc还有webpack的所需要安装的内容和之前一致