云计算服务
服务器租用
DDOS 防护
虚拟主机
域名服务
基础设施
关于我们
一步一步尝试，下面这个是不支持的：
首先：1.npm i vue -S
把vue的包安装到项目运行依赖
然后在npm run dev
先放代码，再上效果图，会报错的；
//main.js
//如何在 webpack 构建的项目中，使用vue开发
//复习 在普通网页中如何使用vue:
//1.使用 script 标签，引入vue的包
//2.在index页面中，创建一个id为app div容器
//3.通过new Vue 得到一个vm的实例
//在webpack中尝试使用 vue：
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'123',
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
</body>
</html>
在main.js中这么使用其实是没有问题的，让我们仔细看一下报错：
Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
the runtime-only build of Vue：说明你用的不是最全的一个vue包。。使用 script 标签，引入vue的包,这个是最全的包。
main.js中 书写的 ||| import Vue from 'vue'||| 和script导入的vue不一样，import导入的功能不全。
这个就是你import导入进来的包（main属性对应的），如下图：
引入完整的vue模块解决方案：
第一种：直接改main属性对应的值改成dist/vue.js,这个包大小为270kb，而main属性原来对应的包为200kb，vue.js是最全的。
但是我们一般不采取这种方式。
第二种：修改main.js中的 import配置
代码修改图，效果图如下，发现成功了！ import两个文件夹都可以，但是一般是使用vue文件夹
第三种方法：在webpack.config.js中修改配置文件，resolve->alias
***修改配置文件要重新启动
--------------------------------------------------- 分割线 ---------------------------------------------------------------------------------
总结一下三种方式：
（1）。找到node_modules中的vue文件夹，修改里面的package.json中的main属性对应的值，修改为vue下的dist下的vue.js
(2).main.js中引入模块写成：
import Vue from '../node_modules/vue/dist/vue.js'
这样子就不用配置webpack.config.js了
（3）。main.js中写入：
import Vue from 'vue'
配置webpack.config.js增加一项：
resolve:{
alias:{//修改vue被导入时候的包的路径
"vue$":"vue/dist/vue.js"
}
}---------------------------- 总结结束 -----------------------------------------------------------------
.png)
.png)
