webpack 中导入 vue 和普通网页使用 vue 的区别(四)
一:在普通网页中使用 vue
- 使用 script 标签,引入 vue 包
- 在 ndex 页面中,创建一个 id 为 App 的 div 容器
- 通过 new Vue 得到一个 vue 实例
二:在 webpack 中使用 vue
执行命令 : npm i vue -S 把 vue 包安装成项目运行依赖
main.js:
//入口文件
//如何在 webpack 构架的项目中,使用 Vue 进行开发
// 执行命令 npm i vue -s ,把 vue 包安装成项目运行依赖 //在 webpack 中尝试使用 Vue;
//注意:在 webpack 中,使用 import Vue from ‘vue’ 导入的 Vue 构造函数,功能不全,只提供了 runtime-only 的方式,并没有提供像网页中那样的使用方法,实际导入的包是根据包的查找规则导入的
import Vue from 'vue' // 这种方法要在 webpack.config.js 中添加别名指定(修改导入 Vue 包的路径)
// import Vue from '../node_modules/vue/dist/vue.js'//这样是可以的,也可以使用像网页那种使用方法了,不用再 webpack.config.js 中添加别名 alias 了;
//包的查找规则:
// 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'
}
});
webpack.config.js:(添加 resolve 节点)
const path = require('path') //node操作URL要用path模块 //导入在内存中生成html页面的插件
//只要是插件都要放到plugin节点中去
const htmlWebpackPlugin = require('html-webpack-plugin') //node语法
//这个配置文件就是一个js文件,通过node中的模块操作,向外暴露了一个配置对象
module.exports = {
//在配置文件中需要主动指定入口和出口
entry:path.join(__dirname,'./src/main.js'),//入口,表示webpack要打包那个文件
output:{//输出文件相关配置
path:path.join(__dirname,'./dist'),//指定,打包好的文件,输出到那个目录中去
filename: 'bundle.js'//指定输出文件名称
},
plugins: [//配置插件的节点
new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
template: path.join(__dirname,'./src/index.html'),//指定模板页面,将会根据指定的页面路径,去生成内存中的页面
filename: 'index.html',//指定生成的页面的名称
}) ],
module:{//这个节点,用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
{ test:/\.css$/, use:['style-loader','css-loader'] }, //配置处理.css文件的第三方loader规则
{ test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }, //配置.scss文件的第三方loader规则
{ test:/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=6000&name=[name].[ext]'},
{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法
]
},
resolve: {
alias:{//修改 Vue 被导入时候的包的路径
"vue$":"vue/dist/vue.js"
}
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--这时容器-->
<div id="app"> <p>{{msg}}</p> </div> </body>
</html>
如果不在 webpack.config.js 中添加 resolve 节点,它真实寻找的路径文件:
首先报错:
真实寻找路径文件为 node_modules/vue/package.json 文件中有一个为 main 的属性,其属性值即实际import真实引入的 js 文件
webpack 中导入 vue 和普通网页使用 vue 的区别(四)的更多相关文章
- 20 区分webpack中导入vue和普通网页使用script导入Vue的区别
回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- webpack中mainifest.js vendor.js app.js 三者的区别
场景: 大家在利用构建工具进行应用最后的打包过程中,我们希望做到的是将业务代码和第三方引用模块代码分开打包. 因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的.所以我们需要将 ...
- vue2.0基础知识,及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
- webpack中如何使用vue
1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...
- [vue]webpack中使用组件
https://blog.csdn.net/ywl570717586/article/details/79984909 vue.js中全局组件 全局组件的定义 <!DOCTYPE html> ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- webpack中使用vue
1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...
随机推荐
- Android 监听返回键退出程序的两种实现
1.Android 双击返回键退出程序 思路:用户按下返回键时设定一个定时器来监控是否2秒内实现了退出,如果用户没有接着按返回键,则清除第一次按返回键的效果,使程序还原到第一次按下返回键之前的状态.定 ...
- 相机标定过程(opencv) + matlab参数导入opencv + matlab标定和矫正
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 辛苦原创所得,转载请注明出处 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...
- 数组/字符串/ Math / 方法示例
数组 Array concat 数组的合并 <script> var north = ["北京","上海","深圳"]; va ...
- leetcode 748. Shortest Completing Word
Find the minimum length word from a given dictionary words, which has all the letters from the strin ...
- CentOS(Linux) - 安装软件笔记(总) - 开发环境安装顺序及汇总
1.安装java环境 参考文章 CentOS7.1 使用资源搜集 2.需要可视化管理服务器时,需要先安装VPSmate 参考文章 CentOS(Linux) - 安装软件笔记(一) - VPSMate ...
- STL版 括号匹配(感觉不如之前自己用数组模拟的跑的快)
数据结构实验之栈四:括号匹配 Time Limit: 1000MS Memory limit: 65536K 题目描述 给你一串字符,不超过50个字符,可能包括括号.数字.字母.标点符号.空格,你的 ...
- Jmeter创建一个简单的http接口用例
1.新建线程组 添加->Threads(Users)->线程组 线程组用来模拟用户进程. 2.添加http信息头管理器 添加->配置元件->http信息头管理器 Systemi ...
- 闪动的Label控件
带闪动效果带控件,目前只有Label,以后会逐步增加,如果有好看带效果也欢迎您带加入. 如果可能,请在github中star,您的支持是我继续完善的动力,非常感谢. 测试环境:Xcode 5.0,iO ...
- codeforces B. Polo the Penguin and Matrix 解题报告
题目链接:http://codeforces.com/problemset/problem/289/B 题目意思:给出一个 n 行 m 列的矩阵和数值 d .通过对矩阵里面的数进行 + d 或者 - ...
- the art of seo(chapter one)
preface:Andy Johns (@ibringtraffic):growth strategist@Wealthfront ***1.Search Reflecting Consciousne ...