webpack中导入vue与网页中script使用vue

一、安装vue

cnpm install vue -S  // 安装到项目运行依赖

　　

运行之后有报错：

当前使用的包是runtime-only的包，并不是最全的包，在网页中使用script导入的vue包功能最全，这里的vue功能不全，是严格版的

// 这是入口文件
// console.log('ok');

// 如何在webpack构建的项目中使用vue进行开发

// 在普通网页中使用vue
// 1、使用script引入vue的包
// 2、创建一个id=app的容器
// 3、new 创建vm 实例

// cnpm install vue -S   // 安装到项目运行依赖

// 在webpack中使用 import Vue from 'vue' 导入的vue，功能不完整，只提供了runtime-only的方式
// 并没有提供像网页中那样的使用方式

import Vue from 'vue'
// 包的查找规则：
// 1、找项目根目录中有没有 node_modules 的文件夹
// 2、在 node_modules 中根据包名，找到对应的vue文件夹
// 3、在vue文件夹中，找一个叫做package.json的包配置文件
// 4、在package.json中查找main属性【main属性指定了包被加载之后的入口文件】

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

　　

查找 ： node_modules  ---  vue  --  package.json   ---  main  属性："main": "dist/vue.runtime.common.js",

所以我们在import之后得到的是vue.runtime.common.js文件

这里的vue.js就是在script标签中导入的那个，为了解决上面的报错信息，

1、可以更改import的路径：

import Vue from '../node_modules/vue/dist/vue.js'

2、修改webpack.config.js文件配置：

首先js文件中还是使用  import Vue from 'vue'

其次，修改配置文件：增加resolve节点，

注意：每次修改了配置文件都要重新启动才可以