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值