(Vue.js 学习一)Vue学习记录

Vue.js 配合Element-Ui 开发

环境安装

$ sudo npm install vue
$ sudo npm install --global vue-cli
$ npm i element-ui -S

新建项目

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

关于import 路径的问题

可以在build目录下webpack.base.conf.js增加alias ，以后就不用在写.././了

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'src': path.resolve(__dirname, '../src'),
      'common': path.resolve(__dirname, '../src/common'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },

Vue语法注意点

v-bind 可以写成: 比如组件之间传值可以用

<v-header :seller="seller"></v-header>

style 的样式报错

<style lang="stylus" rel="stylesheet/stylus">

  .header
    width 100%
    height 80px
    position: relative
    background: rgba(7, 17, 27, 0.5)
</style>

在packge.json 下加入这两个 “stylus-loader”: “^3.0.2”, “stylus”: “0.52.4”,

这里很奇怪别人的项目只要加入”stylus-loader”: “^3.0.2” 就行了。但是我的不加”stylus”: “0.52.4”,就会报错。提示安装不成功，

错误信息如下： peerDependencies WARNING stylus-loader@^3.0.2 requires a peer of stylus@>=0.52.4 but none was installed

组件之间传值

<v-header :seller="seller"></v-header>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        seller: {}
      };
    },
    components: {
      'v-header': header
    }
  };
</script>

组件接受传值

<script type="text/ecmascript-6">

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        
      };
    },
  };
</script>

访问数据的框架

vue-resource axios 两个都可以，但是推荐使用axios

使用栗子

在吗main.js 下配置baseURL

import axios from 'axios'
axios.defaults.baseURL = 'http://gank.io/api/data/Android/'
Vue.prototype.axios = axios

然后这样使用

this.axios.get('/10/1').then(function (response) {
        console.log(response)
      });