关于学习 VUE-CLI 的疑惑

Question

题主使用 VUE 半年, 之前都是html直接引入JS文件直接撸的.

<script src="vue.js"></script>var vm = new Vue({});

最近对 VUE-CLI 有点蠢蠢欲动，在撸文档，扫博客，看视频之后，终于是把一个 HELLO_WORLD 搭起来了（如图）。

但是也由此产生了一些疑惑

1. 观察到 APP.vue 中包含了结构, 样式, 逻辑, 是否就是说用 .vue 代替了 .html的写法;

2. 输出的文件夹dist中没有html文件, 那么我该怎么样去访问这些页面? 虽然在输入命令行 npm run dev 后, 我是可以在 losthost 中进行访问, 但是之前我都是写一个 a.html, 然后在浏览器打开的啊;

3. 项目创建有用到 vue init webpack-simple , 是不是我我还要学习 webpack;

4. 页面间的跳转是否需要用 Vue Router 代替 a 标签;

诸多疑惑, 还望赐教, 多谢.

Answer 1

学习框架要懂得它的工作原理，webpack是现代前端框架的基础。从理解SPA的工作逻辑和编译过程开始，你需要知道你写的html不是真的html，他们只是html模板，所有网页元素由JavaScript生产，至于为什么要这么做，建议你找找相关文章读一读。

Answer 2

我也在学习vue中，可以和楼主分享一下学习经验。谈谈你提的问题。VueCli是专门服务于Vue这个框架的，目的就是为了方便开发，区别于传统的HTML+JS+CSS的操作方式。如果要在常规的HTML文件和.js文件中构建一个Vue项目，就需要单独引入Vue，然后在JS中实例化，构建组件，在html或CSS文件中写样式...相对来说还是比较麻烦的，并且整个项目结构不够清晰。所以.vue在VueCli中是可以替代单独写HTML的，因为已经将template中的内容作为了html的内容。npm run dev是开发环境的运行，它包括了很多webpack的配置，所以和以前直接打开html有区别。npm run build就是打包项目，如果你的项目是完整的，打包后dist中是有HTML文件的，楼主可以检查一下自己的项目。VueCli已经将webpack配置在了项目中，为的就是配置各种插件和构建一套完整且高效的开发环境。虽然比较难，但是作为目前最热门的构建工具，还是需要慢慢啃 - -。在Vue中页面跳转完全可以用router代替，并且很多传统的开发方式都可以舍弃，如操作DOM，在Vue项目中基本不需要。我见过在Vue中疯狂用jQuery的...这样就有点在足球场打篮球的感觉了...