关于学习 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中，可以和楼主分享一下学习经验。谈谈你提的问题。

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

，

Answer 3

看你的描述你使用的vuecli2.X的版本，我使用的是vuecli3.0,基于我的使用情况交流一下我的经验：
1.我个人觉得vue是替代了html写法
2.vuecli3.0创建工程后，在根目录下有个public文件夹，index.html在里面，build后在dist文件夹中会有一个index.html，这个文件就是入口了
3.在实际使用中有做过移动端的，也有使用iview这种vue后台管理前端框架，都是对vue.config.js(vuecli3.0)进行简单修改就可以专注于页面开发，我做的都是单页面，如果要是页面开发可能会需要更多webpack方面的知识
4.vue中所谓的页面跳转，我认为不是类似a标签的跳转，而是页面中router-view加载组件的变化，变化的过程是通过Vue Router来实现的。

Answer 4

1. .vue的写法只是一种规范，打包时会被webpack中的vue-loader进行编译
2. 执行npm run build打包会在dist目录生成编译后的文件，如果单页应用的话只有一个index.html作为入口文件，页面是通过vue-router进行路由管理，单页应用是前端管理页面路由跳转的。
3. 前期只需要了解webpack原理即可，不用深入，vue脚手架已经内置了webpack配置，如果有个性化的配置只需要在webpack.config.js中修改，这里会覆盖默认配置，api中都有说明的。
4. vue页面跳转实际上是vue-router的组件切换，如果不跳转外部页面一般不需a标签。

Answer 5

感谢各位的回答。
问题提出到现在已经半年多，目前已经能够熟练地使用cli搭建项目，主要使用了vue-router + vuex + typescript + e2e:nightwatch等插件, 现在上线了两个项目。
现在回答之前的问题（以(cli3)vue create xx 进行初始化为例）。

1 & 4：以我的理解，.vue 文件是之前 .html 文件的一部分，App.vue挂载在index.html的<div id="app"></div>上，是index.html的一个组件。通过vue-router来改变需要挂载的组件；
2：无复现，可能是删除了index.html导致的；
3：依经验，学会 webpack 并不是必要条件，遇到问题百度基本可以解决。

再次感谢！