关于 vue 学习的问题

[writerG]

求一个 vue-cli 的相关教程。

有一定的 HTML，CSS，JS 基础。

目前的需要是学习 vue+elementui 来写前端。。。

elementui 好说，会用 bootstrap 这个也能快速上手。。

但是 vue 的学习让我犯了难。。

都说把官网上的教程看一遍就能学会，但是我看了一遍仍旧很懵。。。于是我又去 B 站看了一个“黑马程序员”的“4 小时 vue 入门”。。（里面的内容主要就是讲了，指令和 axios 向后台发送请求，最后用一个音乐播放器实例作为知识学习的训练。。这部分确实讲的通俗易懂。）

但是远远不够，我的项目是用 vue-cli 来搭建的前端项目，当我成功的创建出一个项目之后，我发现里面的代码我都看不懂。。。。单文件组件究竟是如何使用的？路由是如何使用的？ main.js 文件里的代码看不懂。还有模板的问题。

这些官网上确实讲了，但是官网只讲了，你按照这个格式写，就能运行了。。完全不讲一下代码是什么含义，我看完后仍旧是一头雾水。。。

我又找了一些视频教程但发现都是按照官网那个格式讲的，根本讲不出个所以然。。。。

我想求一个教程能解决上述问题，最好是一行一行代码讲，这行代码是什么意思的那种。。。

提前谢谢大家了！

[1KN6sAqR0a57no6s]

也许你应该先看看 webpack https://webpack.js.org/concepts/

当你在 vue-cli 创建出来的项目写代码时，你并不是在写一个可以直接运行的程序，而是在写一些经过分析、加工和打包之后才能运行的代码。main.js 则是打包的入口文件。

Vue 本质上是一个构造函数，单文件组件会被转化成该构造函数的参数（一个 JS 对象），你在写单文件组件时其实就是在写构造函数的参数。每个单文件组件都会在最后打包成的代码运行时变成一个 Vue 实例。

[itning]

同意楼上，应该先学习前端的一些打包工具，和基本原理，然后就能弄明白 Vue.JS 实现原理了

[Trim21]

你可以从 webpack 开始尝试自己搭一个打包环境，就能弄懂了。vue-cli 生成的配置文件在 webpack 的配置文件外面又包了一层

[arjen]

我就是看了一天文档，找个成型的项目抄就会了。。。

[9ki]

学习一个未知的东西的时候不要太深入原理，要把 vue，react，ng 当成一种开发模式才能学下去，所以你现在应该做的是 “习惯” vue 的开发模式，然后慢慢积累对工具链的熟练度

[TomVista]

工具人养成指南

[yEhwG10ZJa83067x]

英文： https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
翻译： https://zhuanlan.zhihu.com/p/38209210
建议看看下这篇科普文档，以前我也是和你差不多，因为我主后端，前端也就 html+css+js （ jquery ），简而言之现代 JavaScript 。我们从简单的 HTML 和 JS 转向使用包管理器(package manager)来自动下载第三方依赖包，使用模块打包器(module bundler)来创建单个脚本文件，使用转译器(transpiler)来支持未来的语言特性，和使用 task runner 来自动化各构建过程。

[itechify]

本辣鸡后端，有个项目需要搞 vue 。最开始我是跟着技术胖学的，一整套下来差不多就懂了，遇到什么不懂就学什么。整体来说需要学会一点 es6，nodejs，接着 npm+webpack 也要知道。最烦的是 webpack 不同版本有些区别。最后 github 里找 vue-admin 模板，修修改改，能跑就行。

[qianyan]

@arjen 和你差不多，看了几天看不下去了，直接找个模板参照着搞，再问问其他人差不多能写，但还是不懂原理细节