npm常用依赖和简单使用

install和i都可以安装， -S是指记录到package.json中(默认)

Element-UI

npm install element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'//
import 'element-ui/lib/theme-chalk/index.css'//
import App from './App.vue'

Vue.use(ElementUI)//

Axios

npm install axios

import axios from 'axios'

axios.defaults.baseURL="http://localhost:8088" //发送请求时默认地址
Vue.prototype.$http = axios //发送请求时用this.$http置换axios

Font Awesome

npm install font-awesome -S

import Vue from 'vue'
import 'font-awesome/css/font-awesome.min.css'//引入font-awesome
import App from './App.vue'

Vue Router

默认安装最新版'@4'

npm install vue-router@3

router\index.js

import VueRouter from "vue-router"
import Vue from "vue"
import Discover from "../components/Discover.vue"
import Friend from "../components/Friend.vue"
import My from "../components/My.vue"
import Toplist from "../components/Toplist.vue"
import Playlist from "../components/Playlist.vue"
import Product from "../components/Product.vue"

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path: "/", redirect: "/friend"},
        {
            path: "/discover", 
            component: Discover,
            children: [
                {path: "toplist", component: Toplist},
                {path: "playlist", component: Playlist}
            ]
        },
        {path: "/friend", component: Friend},
        {
            path: "/my", 
            component: My,
            children: [									  //不使用$route.params.id时加props: true参数
                {path: "product/:id", component: Product, props: true}
            ]
        },
    ]
})

export default router

main.js

import router from './router'// './router/index.js'
new Vue({
  render: h => h(App),
  router// router: router
}).$mount('#app')

示例

<template>
    <div>
        <hr>
        <h1>我的</h1>
        <router-link to="/my/product/1">商品1</router-link>
        <router-link to="/my/product/2">商品2</router-link>
        <router-link to="/my/product/3">商品3</router-link>
        <router-view></router-view>
    </div>
</template>

<template>
    <div>
        <hr>
        <!-- 详情{{$route.params.id}} -->
        <h3>详情{{id}}</h3>   
    </div>
</template>
<script>
export default {
    props: ["id"]
}
</script>

Vuex

默认安装最新版'@4'或'@next'

npm install vuex@3

store\index.js

import Vue from "vue";
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state(){
        return {
            count: 0,
            todos: [
                { id: 1, text: '吃饭', done: true },
                { id: 2, text: '睡觉', done: false },
                { id: 3, text: '玩', done: true }
              ]
        }
    },
    mutations: {
        increment(state, n){
            state.count+=n
        }
    },
    getters: {
        doneTodos(state){
            return state.todos.filter(todo => todo.done)
        }
    }
})

main.js

import store from "./store" //"./router/index.js"

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store// store: store
}).$mount('#app')

示例

<template>
  <div class="hello">
    <button @click="add">add</button>
    {{count}} {{countAlias}} {{countPlusLocalVar}}
    <ul>
      <!-- <li v-for="item in todos" :key="item.id">{{item.text}}</li> -->
      <li v-for="item in ShowDone" :key="item.id">{{item.text}}</li>
      {{hhh(112)}}
    </ul>
  </div>
</template>

<script>
import {mapState, mapGetters} from "vuex"

export default {
  name: 'HelloWorld',
  props: {
  },
  data(){
    return {
      localVar: 10
    }
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count + this.localVar
  //   }
  // },

  // computed:mapState({
  //   count: state => state.count,
  //   countAlias: "count",
  //   countPlusLocalVar(state){
  //     return state.count + this.localVar
  //   }
  // }),

  // computed: mapState([
  //   "count"
  // ]),

  // computed:{
  //   todos(){
  //     return this.$store.getters.ShowDone
  //   }
  // },

  // computed: mapGetters({
  //   todos: "ShowDone",
  //   hhh: "hhh"
  // }),

  // computed:mapGetters([
  //   "ShowDone", "hhh"
  // ]),

  computed:{
    ...mapState({
      count: state => state.count,
      countAlias: "count",
      countPlusLocalVar(state){
        return state.count + this.localVar
      }
    }),
    ...mapGetters([
      "ShowDone", "hhh"
    ])
  },
  
  methods:{
    add(){
      this.$store.commit("increment", 100)
    }
  }
}
</script>

MockJs

npm i mockjs

mock\index.js

import Mock from "mockjs"
		  //这里用正则表达式解决带参的请求
Mock.mock(RegExp("/test.*"),{
    ret: 123,
    data:{
        mtime: "@datetime",
        "score|100-200": 1,
        "rank|0-100": 1,
        "stars|1-5": 1,
        "nickname" : "@cname",
        img: "@image('200x100', '#ffc33', '#fff', 'png', 'fast mock')"
    }
})

main.js

import "./mock"

补充：一些常用的占位符

'Boolean': '@boolean', // 随机生成布尔类型
'Natural': '@natural(1, 100)', // 随机生成1到100之间自然数
'Integer': '@integer(1, 100)', // 生成1到100之间的整数
'Float': '@float(0, 100, 0, 5)', // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': '@character("aeiou")', // 在aeiou中，生成随机字符，不传参表示生成随机字符
'String': '@string( 2, 10)', // 生成2到10个字符之间的字符串
'Range': '@range(0, 10, 2)', // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': '@date("yyyy yy y MM M dd d")', // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Color1': '@color', // 生成一个颜色16进制随机值
'Color2': '@rgb', //生成一个颜色rgb随机值
'Paragraph':'@paragraph(2, 5)', //生成2至5个句子的文本
'Sentence':'@sentence(3, 5)', //生成3至5个单词组成的一个句子
'World':'@word(3, 5)', //生成3-5个字母组成的单词
'title':'@title(3,5)', //生成3-5个单词组成的标题
'cParagraph':'@cparagraph(2, 5)', //生成2至5个句子的中文文本
'cSentence':'@csentence(3, 5)', //生成3至5个词语组成的一个中文句子
'cWorld':'@cword(3, 5)', //生成3-5个字组成的中文词语
'ctitle':'@ctitle(3,5)', //生成3-5个词语组成的中文标题
'Name': '@name', // 生成姓名
'cName': '@cname', // 生成中文姓名
'Url': '@url', // 生成url地址
'Email':'@email',//生成邮箱
'Phone':'@phone',//生成电话
'idCard':"@id()",//生成身份证
'Address': '@county(true)'， // 生成省 市 县组成的地址
'Guid':'@guid()', //生成Guid值