webpack 搭建 vue项目环境
目录结构:
index.html:
<!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"></div> <script src="/dist/main.js"></script> </body> </html>
main.js
import Vue from 'vue' import App from './App.vue' import MM from '../packages/index' Vue.config.productionTip = false Vue.use(MM) var app = new Vue({ el: '#app', template: '<App/>', components: { App } })
app.vue
<template> <div id="app" style="height:100%"> <VueCalendar /> </div> </template> <script> export default { name: 'app', methods: { }, mounted () { } } </script> <style> </style>
包文件:
{ "name": "vx-component", "version": "1.0.0", "description": "", "main": "dist/main.js", "private": false, "scripts": { "dev": "webpack-dev-server --open --config webpack.config.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "wenguang.xia", "license": "ISC", "devDependencies": { "@babel/core": "^7.10.3", "@babel/preset-env": "^7.10.3", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.6.0", "html-webpack-plugin": "^4.3.0", "style-loader": "^1.2.1", "url-loader": "^4.1.0", "vue-loader": "^15.9.3", "vue-template-compiler": "^2.6.11", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0" }, "dependencies": { "vue": "^2.6.11" } }
webpack.config.js
const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.join(__dirname, './dist'), publicPath: '/dist/', filename: 'main.js' }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的 } }, devServer: { historyApiFallback: true, overlay: true }, module: { rules: [ { test: /\.vue$/, use: [ { loader: 'vue-loader', } ] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jpg|gif|svg|bmp)$/, use: [ { loader: 'url-loader', options: { limit: 8192, name: '[path][name].[ext]' } } ] }, // { // test: /\.(woff|woff2|eot|ttf|otf)$/, // use: [ // { // loader: 'file-loader', // options: { // name: '[path][name].[ext]', // context: 'src', // }, // }, // ], // } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'vx-component' }), new VueLoaderPlugin(), ], }
遇到的问题
[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.
vue有两种形式的代码 compiler(模板)模式和runtime模式(运行时),vue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。
这是vue升级到2.0之后就有的特点。而我的main.js文件中,初始化vue却是这么写的,这种形式为compiler模式的,所以就会出现上面的错误信息
// compiler new Vue({ el: '#app', template: '<App/>', components: { App } })
方法一: 将main.js中的代码修改如下就可以
//runtime new Vue({ render: h => h(App) }).$mount("#app")
方法二:webpack配置文件里有个别名配置,具体如下
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的 } }
方法三: 那就是在引用vue时,直接写成如下即可
import Vue from 'vue/dist/vue.esm.js'
[Vue warn]: Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option
这个报错是因为找不到 这个组件导致的,对于新手来说,这是个坑,因为vue要求如果创建组件时使用驼峰命名,调用组件的时候需要将驼峰改为横线-写法
注:用vue-lodaer处理单文件组件后就不存在这样的问题了
原文地址:https://www.cnblogs.com/xiawg/p/13213571.html
- 【译】《Understanding ECMAScript6》- 第一章-基础知识(一)
- 聊聊C10K问题及解决方案
- 【译】《Understanding ECMAScript6》- 简介
- 深入理解 Java 并发之 synchronized 实现原理
- 你真的很熟分布式和事务吗?
- 基于Nginx负载均衡方案
- Android 使用android-support-multidex解决Dex超出方法数的限制问题
- Netty 实现原理浅析
- 上海2017QCon个人分享总结
- 为最佳性能调优 Nginx
- 《微信小程序七日谈》- 第一天:人生若只如初见
- 类加载器详解
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入Node.js的模块加载机制,手写require函数
- Redux异步解决方案之Redux-Thunk原理及源码解析
- MySQL设计与优化
- Elasticsearch学习笔记
- 《springboot实战》
- 360全国大学生信安技术大赛记录
- gh0st源码分析与远控的编写(四)
- 记一次Elasticsearch优化总结
- unix环境高级编程(上)-文件篇
- php webshell下直接反弹shell(不借助任何其他语言)
- XssHtml – 基于白名单的富文本XSS过滤类
- unix环境高级编程(下)-高级IO和进程间通信篇
- mybatis原理,配置介绍及源码分析
- web.py使用不当可能造成代码执行
- 《redis设计与实现》1-数据结构与对象篇