Vue - 区分webpack中导入vue和普通网页中导入vue的区别

在普通网页中如何使用Vue-1. 使用 script 标签，引入 vue 的包-2. 在 index 页面中，创建一个 id 为 app div 容器-3. 通过 new Vue 得到一个 vm 的实例在webpack 中尝试使用 Vue：注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供...

Welkin_qing

2690人浏览 · 2018-08-22 15:43:51

Welkin_qing · 2018-08-22 15:43:51 发布

在普通网页中如何使用Vue

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

在webpack 中尝试使用 Vue：

注意: 在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数（dist/vue.runtime.common.js），功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；

导入方法：

找项目根目录中有没有 node_modules 的文件夹
在 node_modules 中根据包名，找对应的 vue 文件夹
在 vue 文件夹中，找一个叫做 package.json 的包配置文件
在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

vue
导入的并不是我们在普通网页中使用的vue.js

法一：

main.js中：

import Vue from ‘…/node_modules/vue/dist/vue.js’

//直接导入

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

这是主页面

<body>
  <!-- 这是容器 -->
  <div id="app">
    <p>{{msg}}</p>

    <login></login>

  </div>
</body>

结果：

法二：

main.js中：

import Vue from 'vue'//因为不知道导入的是哪个vue，所以需要在wwebpack中进行声明
//利用该方法

webpack.config.js中：
与module平级
在这里插入图片描述

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

结果和原来一样：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^