By welkin

Updated:

Contents

#在普通网页中如何使用Vue
-1. 使用 script 标签 ，引入 vue 的包
-2. 在 index 页面中，创建 一个 id 为 app div 容器
-3. 通过 new Vue 得到一个 vm 的实例

#在webpack 中尝试使用 Vue：
注意： 在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
vue
导入的并不是我们在普通网页中使用的vue.js

##法一：
main.js中：

1
2
3
4
5
6
7
8
9
import Vue from '../node_modules/vue/dist/vue.js'
//直接导入

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
})

这是主页面

1
2
3
4
5
6
7
8
9
<body>
  <!-- 这是容器 -->
  <div id="app">
    <p>{{msg}}</p>

    <login></login>

  </div>
</body>

结果：
结果

#法二：
main.js中：

1
2
import Vue from 'vue'
//利用该方法

webpack.config.js中：
与module平级

1
2
3
4
5
resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
       "vue$": "vue/dist/vue.js"
    }
  }

结果和原来一样：
结果

Contents