欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用webpack解析.vue文件注意事项

程序员文章站 2022-03-08 14:07:09
...

1.下载的node_modules依赖一定要相互之间兼容;

下面是demo中正常运行使用的依赖文件表:package.json

{
  "name": "cssloader",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.0"
  },
  "dependencies": {
    "vue": "^2.2.6"
  }
}

2.在main.js中也要注意模块名称的一致 

//01.导入vue依赖包:固定写法,注意大小写的问题,怕里的Vue是与下面new Vue的变量名一致
import Vue from 'vue';

//02.导入定义的vue对象
import App from './App.vue';

//03.将导入的App对象在main.js中渲染出来
new Vue({
	el:'#app', 
	//使用箭头函数自动创建对象
	//render:function(create){create(App)} //这是es5的写法
	//es6的写法:箭头函数的意思就是goes to:左边是参数,右边是表达式
	render:c=>c(App)
});
3.index1.html中的写法,要注意是否有视口 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   	<!--固定写法,如果是移动端就在这里加个视口,如果不是就不用加-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
	<!--使用app去定义要解析的对象-->
    <div id="app">
    </div>    
</body>
</html>





上一篇： Delta Lake-深入理解表结构和结构演变

下一篇： webpack require context 说明

推荐阅读