VUE系列(1)—vue项目的简单入门（1）

[XYooo]

这次接触的项目是使用vue语言，但是之前接触的是react+webpack的项目，webpack.config.js也是有着丰富的loader跟plugins，但是接手的这个vue项目还不是很完善，在使用的过程中可以加些内容。下面先从了解整个工程开始

（一）entry 和 output
这里入手一个工程我打算先从webpack看起

webpack.config.js的entry和output是这么写的

webpack官网
webpack中文官网
Webpack2 升级指南和特性摘要

entry: ['./client/src/main.js'], //配置入口
output: {  //配置输出选项
    path: path.join(__dirname, 'client'),//输出路径为，当前路径下
    filename: 'build.js'//输出后的文件名称
  },

（1）entry
其实主要涉及三个文件：main.js app.vue router
（1-1）去看看main.js是什么?

                      图1-1 main.js

看下这个文件涉及很多引入的文件：./App，./routers，还有一个el:'#app-box'（index.html） ，以及new Vue()）涉及的语法。那么我们就一个一个分析:

（1-1-1） App.vue

                    图1-2 App.vue

这里是vue-router的语法，只知道<router-view></router-view>中的内容是会被更换掉的。有哪些内容，看routers里的内容。

更多vue-router语法请点击

（1-1-2） routers

                          图1-3 routers

这里有着多个router文件，有main.js index.js travel.js 和yonyou.js。而我们写的页面的地址放在yonyou.js中，后续会补上图片

（2） output

剩下部分是el:'#app-box' 和 new Vue()的语法
先找到app-box是在哪里呢，上述的new Vue()做什么用？
（其实这个工程的输出就是一个index.html和bundle.js)
（2-1 ）index.html

						图1-4 index.html

（2-2）用法
右边方框两行代码，再根据output可以知道：routers里面三个routes的代码更替在App.vue中的 <vuerouter-view/> 中显示，App.vue又根据文件main.js的new Vue()语法 显示在index.html的app-box下面，引入所有的js打包文件bundle.js。

（二）一个具体的业务页面

（1）概述

前面介绍的整个工程的开始部分，那么下面我们进入一个具体得业务页面。

这个页面就是一个首页，具体的不详细解答了，看下面的参考资料

                       图2-1 首页

参考资料：

（1）VUE学习（在官网右上角）
vue的教程
vue的API

（2）VUE生态系统（在官网右上角）
其实再看Vue教程部分的资料时候，发现说好的实例写法怎么跟工程里面的业务代码写法相差这么大呢？并没有随处见到new Vue()的出现？答案就在图2-1的写法方式是vue-loader的方式

vue-loader
vue-router

（三）vue的超级便捷之处
1.用过less和scss语法人都知道这样写起样式非常简洁，因此css的语法会使用less或者scss，但是这两种语言都是需要编译。在以往的react+webpack中会在webpack中使用loader来处理，但是在vue中最后结果就是只要加个lang='less'、lang='scss'就可以使用

lang的用法

其实还有一种方法就是

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', // <style lang="sass">
      less: 'vue-style-loader!css-loader!less-loader?indentedSyntax' // <style lang="less">
    }
  }
}

2.想要使用autoprefixer，进行css样式补全前缀

//使用webpack2.X，在plugins添加
new webpack.LoaderOptionsPlugin({
      vue: {
        // use custom postcss plugins
        postcss: [require('autoprefixer')()]
      }

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
          css: 'vue-style-loader!css-loader!postcss-loader'
        }
  }
}