vue从入门到放弃

vue从入门到放弃

哈哈,虽然标题是这样起的,但是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'

示例:

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

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

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

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

  1. import组件

    1
    import MyCom from '@/components/MyCom'
  2. 将组件信息添加到路由列表中

    示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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'