哈哈，虽然标题是这样起的，但是Web工程化的好处可是大大的呀，方便项目的前期构建同时也有利于后期维护，所以还是尽早入坑吧~

1.使用vue-cli脚手架创建一个vue项目

vue init webpack <项目名(可选)>

2.vue-cli脚手架目录结构分析

3.vue单文件组件

一个.vue文件就是一个vue单文件组件,它由（HTML+JS+CSS）组成

4.安装stylus支持

Step1 npm i stylus stylus-loader --save-dev #npm安装stylus-loader

Step2 在.vue组件中样式标记加上lang='stylus'

示例：

<style scoped lang='stylus'>
fonts = Microsoft Yahei
h1, h2 {
  font 30px/1 fonts
}
</style>

5.编写自己的组件并使用Route渲染

Step1 在src/component目录下新建一个MyCom.vue组件文件并编写组件内容

Step2 写好组件内容后，修改route索引文件router/index.js

1. import组件

   import MyCom from '@/components/MyCom'

2. 将组件信息添加到路由列表中

   示例：

   routes: [
     // {
     //   path: '/',
     //   name: 'HelloWorld',
     //   component: HelloWorld
     // },
     {
       path:'/',
       name:'MyCom',
       component:MyCom
     }
   ]

   6.踩过的一些坑

   1.npm run dev后，局域网内其他设备无法调试

   这个要慌，问题很大!尤其是你在进行移动Web开发的时候，还是真机调试比较靠谱。

   解决方案： 修改config/index.js，将host:'localhost'改成host:'0.0.0.0'