版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83273505
首先,普通网页中使用vue:
- 使用 script 标签,引入 vue 的包
- 在 index 页面中,创建一个 id 为 app div 容器
- 通过 new Vue 得到一个 vm 的实例
1.先将该配置的属性都配置好
2.局部引入 vue 的项目文件包
命令:cnpm i vue -s
3.在入口文件(main.js)中引入 vue
注意:
- 在 webpack 中,使用
import Vue from 'vue'
导入的 Vue 构造函数功能不全,只提供了 runtime-only 的方式(阉割版),没有提供网页那种使用方式(完整版); - 完整版——就是我们平时 vue 编写的那种形式
- 官方推荐:使用阉割版——参见:webpack 打包 vue(阉割版)
包的查找规则:
- 找项目根目录有没有 node_modules 的文件夹
- 找 node_modules 中根据包名,找到对应的 vue 文件夹
- 在 vue 文件夹中,找一个叫做 package.json 的包配置文件
- 在 package.json 文件中,查找一个 main 属性(main 属性指定了这个包在被加载的时候,的入口文件)
引用完整版 vue 包的两种方式:
1.在 webpack.config.js 中修改 vue 被导入时候包的路径,再引用下面文件
import Vue from 'vue';
webpack.config.js 中修改 vue 被导入时候包的路径:
在 module.exports 中添加下面文件
resolve: {
alias: {
// 设置 vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
}
2.使用下面的方式导入包:
import Vue from '../node_modules/vue/dist/vue';
4.项目开始
命令:npm run dev
index.html
<div id="app">
<h1>{{msg}}</h1>
<login></login>
</div>
main.js
let login = {
template: '<h1>这是login组件,是使用网页中的形式创建出来的组件</h1>'
};
var vm=new Vue({
el:'#app',
data:{
msg:'我是 vue !'
}
});