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

@XYooo 2017-12-31 15:11:42发表于 iuap-design/blog

这次接触的项目是使用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'
        }
  }
}