一、安装配置依赖
1) vue init webpack-simple 项目名称
2) cnpm install
3 ) npm run dev
4 ) cnpm installvuex vue-router axios -D
5 ) cnpm installstyle-loader css-loader -D
二、做vue项目流程
1) 规划组件结构 (Nav.vue、Header.vue、Home.vue)
2) 编写路由(vue-router)
3 ) 编写具体每个组件的功能
三、项目结构
1) 在src中建立components存放组件的文件夹
2) assets存放
四、组件篇-comonents
1) 在src中建立components存放组件的文件夹
2) 在components中建立*.vue文件
3 ) 在App.vue中导入*.vue (import NavView from'./components/Nav.vue')
4 ) export default{
components:{
NavView
}
}
5) 在template中显示
<div id="app">
<NavView></NavView>
</div>
五、路由篇-router
1) 在需要跳转的地方,加入<router-link>
to:路由地址,tab是会自动在a标记的上一层生成li,active-class高亮的class设置
<router-link to='/home'tag="li" active-class="active">
<ahref="#">首页</a>
</router-link>
2) 在要显示的地方路由切换内容的地方放入,<router-view>
3) 在main.js中引入
import VueRouter from 'vue-router';
import RouterConfig from'./router.config.js' //配置router的参数文件
Vue.use(VueRouter);
new Vue({
el: '#app',
router,
render: h => h(App)
});
const router = new VueRouter({
mode:'history',
scrollBehavior:() =>({y:0}), //切换路由的时候,内容都从顶上开始读
routes:RouterConfig
})
4) 在src中建立一个router.config.js文件
5) router.config.js完善里面的配置
import Home from'./components/Home.vue'
import Follow from'./components/Follow.vue'
import Column from'./components/Column.vue'
export default[
{
path:'/home',
component:Home
},
{
path:'/follow',
component:Follow
},
{
path:'/column',
component:Column
},{
path:'/',
redirect:'/home' //默认跳转到首页
},{
path:'*',
redirect:'/home' //404默认页面
}
]
六、vuex状态管理
1) 在src下建立store文件夹 √
2) 在store中建立index.js √
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
modules:{
mutations
},
//把actions导出去
actions
})
3) 在main.js加入vuex的代码 √
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RouterConfig from'./router.config.js'
import store from './store/' //默认会找到store文件的index.js
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
routes:RouterConfig
})
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
4) 在store中新建一个actions.js √
export default{
showHeader:({commit})=>{
//需要有types.js,但是这个项目去掉了types.js
commit('showHeader') //commit到了mutations里面去了
},
hideHeader:({commit})=>{
//需要有types.js,但是这个项目去掉了types.js
commit('hideHeader') //commit到了mutations里面去了
},
}
5) 在store中新建一个mutations.js √
import getters from './getters'
const state = {
header:true //以上来是ture
}
const mutations = {
showHeader(state){
state.header = true
},
hideHeader(state){
state.header = false
}
}
export default{
state,
mutations,
getters
}
6) 在store中新建一个getters.js √
export default{
headerShow:(state)=>{
return state.header;
}
}
7) 在要触发的地方,加入代码App.vue √
<NavView v-show="'headerShow'"></NavView>
import {mapGetters, matpActions} from'vuex'
computed:mapGetters([
'headerShow'
]),
8) 在App.vue中的exprot中加入监听路由的变化的代码 √
watch:{
$route(to,from){
if(to.path=='/user-info'){
//通知actions,状态哪个变量应该消失了为false
//需要发起,$store是从main.js里的store来的
//然后需要导出到index.js里
this.$store.dispatch('hideHeader') //发出去之后actions.js接收
}else{
this.$store.dispatch('showHeader')
}
}
}
七、数据交互篇-axios
1 ) 在main.js进入axios
import axios from 'axios'
//关于axios配置
//1.配置发送请求的信息
axios.interceptors.request.use(function(config){
store.dispatch('showLoading')
return config;
},function(error){
return Promise.reject(error)
})
//2.配置请求回来
axios.interceptors.response.use(function(response){
store.dispatch('hideLoading')
return response;
},function(error){
return Promise.reject(error)
})
//把axios对象挂到Vue原型上
Vue.prototype.$http = axios
2) 在Home.vue中加入数据交互代码
export default {
data(){
return{
arrList:[]
}
},
components:{
BannerView
},
mounted(){
//获取数据
this.fetchDate()
},
methods:{
fetchDate(){
var _this = this;
this.$http.get('src/data/index.data').then(function(res){
_this.arrList.push =res.data
}).catch(function(err){
console.log('Home',err)
})
}
}
}
八、文章的详情页制作篇
1 ) 在home.vue路由跳转代码中加入
<router-link :to="'/article/'+item.id">
<h2>{{item.title}}</h2>
<p>{{item.detail}}</p>
</router-link>
2)在router.config.js中写上相应的路由配置
{
path:'/article/:id',
component:Article
}
3)在详情页article.vue接收参数,回显数据
data(){
return {
articleData:[ ]
}
},
mounted(){
var reg=/\/article\/(\d+)/;
var id = this.$route.path.match(reg)[1];
this.fetchData(id); //获取路由的id,放出数据交互函数
},
methods:{
fetchData(id){
var _this = this;
this.$http.get('../src/data/article.data').then(function(res){
console.log(res.data[id-1])
}).catch(function(err){
console.log('文章详情页',err)
})
}
}
3)解决data里有html和样式的情况
<p v-html="articleData.content"></p>
4 ) 显示图片
<img:src="articleData.author_face">
5)如何处理时间戳
建立一个文件夹为filters过滤器,在2.0就只能自己写过滤器了
{{articleData.time | normalTime}}
filters:{
normalTime:function(val){
var oDate=new Date();
oDate.setTime(val);
var y=oDate.getFullYear();
var m=oDate.getMonth()+1;
var d=oDate.getDate();
var h=oDate.getHours();
var mm=oDate.getMinutes();
var s=oDate.getSeconds();
return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
}
}
因为会有很多的过滤器,所以在filters文件夹下建立一个index.js,和normalTime.js
index.js
import {normalTime} from'./normalTime'
module.exports = {
normalTime
}
normalTime.js
export const normalTime=(time) =>{
if(time){
var oDate = new Date();
oDate.setTime(time)
var y =oDate.getFullYear();
var m= oDate.getMonth()+1;
var d = oDate.getDate();
var h = oDate.getHours();
var mm = oDate.getMinutes();
var s = oDate.getSeconds();
return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;
}
}
在main.js中,全局引入
importfilters from './filters'
九、过渡动画篇
1 )在App.vue中,修改代码
<transition name="slide-down">
<router-view></router-view>
</transition>
2)在css中加入样式
.slide-down-enter-active, .slide-down-leave-active {
transition: all .4s ease;
opacity: .7;
transform: translate3d(0, 6rem, 0);
}
.slide-down-enter,.slide-down-leave-active {
opacity: .1;
transform: translate3d(0, 6rem, 0);
}
十、语法篇
1 ) 在style标签中导入其他css @import'./assets/css/index.css'
(目前同一个文件离引入两个css就报错了)
解决他在是在main.js,用require(‘./assets/css/base.css’)全局引用
---------------------
作者:简单灬爱
来源:CSDN
原文:https://blog.csdn.net/servers_zhangyu/article/details/71773836
版权声明:本文为博主原创文章,转载请附上博文链接!