# vue-webpack

**Repository Path**: qiapi/vue-webpack

## Basic Information

- **Project Name**: vue-webpack
- **Description**: 不用vue-cli的使用vue单文件组件和webpack构建项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-02-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. node_modules文件夹可以不用复制，有package.json文件的时候直接npm install 就可以了
2. 修改了package.json文件中的依赖包
3. 在main.js中引入import Vue from 'vue'
4. 添加index.html文件，仍然提示找不到#app的元素，怀疑main.js根本找不到index.html，思考了webpack如何去index.html里面
找到app元素的，应该在配置文件中有所体现，不然webpack不知道去哪里找index.html，对比了使用vue-cli的webpack配置文件，搜索定位
index所在，发现了HtmlWebpackPlugin插件中存在，百度了这个插件的作用，就是用来确定这个index.html的
5. 修改webpack配置文件HtmlWebpackPlugin的配置，浏览器控制台出现：[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>)
页面依旧空白，怀疑是其影响，百度出现这个warning的原因。在webpack配置文件中加入resolve: { alias: { 'vue': 'vue/dist/vue.js' } }配置别名，warning问题解决。页面无任何warning
6. 页面依旧空白，查看控制台无任何报错和warning，审核元素页面有app元素却没有渲染组件，main.js文件有引入也没有渲染nav组件。此处webpack应该
没有问题，回到main.js 和nav.vue寻找问题。
7.检查main.js修改new Vue中component的语法错误为components,浏览器控制台报warning：[Vue warn]: Do not use built-in or reserved HTML elements as component id: nav
百度warning的原因是存在同名组件？怀疑问题在组件名上面，修改组件名为大写Nav,页面的warning解决。
8. 页面依旧空白，检查main.js，加入template:"<Nav/>",页面正常显示了Nav组件。但是控制台waring重新出现
9.修改nav.vue中的name为navigator,同时修改main.js中引用的组件名，页面无warning了。