京东
淘宝镜像
1、安装cnpm
npm i cnpm --registry=https://registry.npm.taobao.org -g
2、然后就可以cnpm安装依赖包了
cnpm install @vue/cli -g
3、cnpm config ls 查看
安装VUe脚手架
cnpm install -g @vue/cli
创建项目
vue create vue-jd(项目名)
<!-- 创建成功后 执行命令 -->
cd vue-jd 进入项目
npm run serve 启动项目
语言环境配置
应用商店中安装 vetur
配置页面
创建views文件 放置能看到的页面 src/views/home/Home.vue
设置路由
安装：npm install vue-router -S
路由配置页面
src/router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '@/views/home/Home.vue'
import Cart from '@/views/cart/Cart.vue'
import User from '@/views/user/User.vue'
import Cate from '@/views/cate/Cate.vue'
import Jdm from '@/views/jdm/Jdm.vue'
const routes=new VueRouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/cate',
component:Cate
},
{
path:'/cart',
component:Cart
},
{
path:'/user',
component:User
},
{
path:'/jdm',
component:Jdm
}
]
})
export default router
入口文件引入
import Vue from 'vue'
import App from './App.vue'
<!-- 引入路由 -->
import router from './router'
Vue.config.productionTip = false
new Vue({
<!-- 挂载 -->
router,
render: h => h(App),
}).$mount('#app')
app.vue引入
<!-- 视图 -->
<router-view></router-view>
sass
安装：1.npm i sass-loader -S
2.cnpm i node-sass -S
- 如果因为网络原因，node-sass安装失败，使用下面命令进行安装
npm install node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
Rem
public=>rem.js=>在index.html引入
<script src="./rem.js"></script>
function resetRootFZ(){
var oHtml = document.querySelector('html');
var w = oHtml.getBoundingClientRect().width;
// 设置根字体的大小等于html节点的宽度的十分之一
oHtml.style.fontSize = w/10 + 'px';
};
resetRootFZ();
// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener('resize',function(){
resetRootFZ();
});
在设置/设置找到rem 修改设置
"px-to-rem.px-per-rem": 75或
"cssrem.rootFontSize": 75
底部导航栏
先构建一个图片组
src/assets/index.js
export const icons={
icon1:'...'
}
把图片引入底部导航栏
<template>
<div class="navbar">
<router-link to='/home'>
<img :src="imgArr.icon1" alt="">
</router-link>
</div>
</template>
<script>
import {imgArr} from '@/assets/index.js'
export default {
data:function(){
return{
imgArr
}
}
}
</script>
引入相关组件
<template>
<div class="home">
<NavBar></NavBar>
111
</div>
</template>
<script>
import NavBar from '@/components/NavBar.vue'
export default {
components:{
NavBar
}
}
</script>
Mint-ui
安装
npm i mint-ui -S
配置
在main.js中引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
icon图标
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
在需要的页面开始使用
<i class="fa fa-window-restore "></i>
Vuex状态管理
安装
npm i vuex -S
创建store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
<!-- 放数据 -->
msg:'111'
},
mutations:{
},
actions:{
}
})
export default store
引入入口文件
import store from './store'
axios
安装
npm i axios -S
调接口
接口方法也写在状态管理中
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
// 调取接口方法
function fetch(api,callback){
// 显示加载中
axios({
method:"GET",
url:'http://localhost:8080'+api,
// headers:{
// token:
// }
}).then(res=>{
let data=null
if(res.data.err===0){
data=res.data.data
}
callback&&callback(data)
}).catch(err=>{
console.log('接口请求异常',err)
}).then(()=>{
// 总是会执行
// 隐藏加载中
})
}
const store=new Vuex.Store({
state:{
msg:'111',
skillArr:[]
},
mutations:{
updateSkillArr(state,payload){
state.skillArr=payload
}
},
actions:{
// 调数据
// 表示store实例
getSkillGoods(store){
fetch('/db/goods.json',data=>{
console.log(data)
store.commit('updateSkillArr',data)
})
// 通过store.commit('updateSkillArr',data)把负载给updateSkillArr 在调updateSkillArr方法
在把他给state
}
}
})
export default store
如何调取数据并渲染
<!-- 在actions里面调取 -->
actions:{
// 掉数据
getSkillGoods(){
fetch('db/goods.json')
}
}
在相关组件中引入
import {mapActions,mapState} from 'vuex'
<!-- 放数据在地方 -->
computed: {
...mapState(['adArr', 'rcmdArr'])
},
<!-- 调用-->
mounted(){
this.getSkillGoods ()
}
<!-- 映射进来 -->
methods:{
...mapActions(['getSkillGoods '])
}
no-console 问题
在package.json中配置
"rules": {
"no-console":0
}
