store
import vue from "vue"
import vuex from "vuex"
vue.use(vuex)
const store = new vuex.Store({
state: {
name: 'weish',
age: 22
},
getters: {
},
mutations: {
xiugai: function (state, res) {
//console.log(state)
//console.log(res)
state.name = res
},
zaici: function (state, res) {
state.name = res
}
},
actions: {
zaici(context,res) {
context.commit("zaici",res);
},
},
modules: {
}
})
export default store
router
import Vue from 'vue'
import Router from 'vue-router'
import error from '@/components/error'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve),
meta: {
keepAlive: true
}
},
{
path: '/genggai',
name: 'genggai',
component: resolve => require(['@/components/genggai'], resolve),
meta: {
keepAlive: true
}
},
{
path: '/404',
name: 'error',
component: error
},
{
path: '*', // 此处需特别注意至于最底部 404页面
redirect: '/404'
}
]
})
//可以判断页面是否需要登录来进行登录
router.beforeEach((to, from, next) => {
next()
})
export default router
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import store from "./store/index.js"
新增 import { AlertPlugin, ToastPlugin } from 'vux'
import store from "./store/index.js"
新增 Vue.use(AlertPlugin)
新增 Vue.use(ToastPlugin)
//console.log(store)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
webpack.base.cong.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const vuxLoader = require('vux-loader')
const webpackConfig = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
APP.vue (keep-alive)
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
首页 + 子组件 + 全局组件 +生命周期
<template>
<div id="HelloWord">
<h1>{{message}}</h1>
<divider>我是有底线的</divider>
<div @click="reset"> {{name}}</div>
<InputData :message='message' :my-message="msg" @incre="child"></InputData>
<FooterTab></FooterTab>
</div>
</template>
<script>
//import store from "../store/index.js"
import FooterTab from "./component/FooterTab.js";
import { Divider } from 'vux';
//import InputData from "./component/InputData.js";
//console.log(this)
let InputData = {
template: `<div @click="child">{{message}}{{myMessage}}</div>`,
props: ["message", "myMessage"],
methods: {
child: function() {
this.$emit("incre", "lalala");
}
}
};
export default {
name: "HelloWord",
data() {
return {
msg: "hello word",
message: "hello word",
name: this.$store.state.name
};
},
components: {
InputData,
Divider
},
methods: {
reset: function() {
this.message = "8888888";
},
child: function(res) {
//console.log(res);
this.message = res;
}
},
activated() {
console.log("测试1被激活");
},
deactivated() {
console.log("测试1被缓存");
},
beforeCreate: function() {
//console.group("------beforeCreate创建前状态------");
//console.log("%c%s", "color:red", "el : " + this.$el); //undefined
//console.log("%c%s", "color:red", "data : " + this.$data); //undefined
//console.log("%c%s", "color:red", "message: " + this.message);
},
created: function() {
//console.group("------created创建完毕状态------");
//console.log("%c%s", "color:red", "el : " + this.$el); //undefined
//console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
//console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
//console.group("------beforeMount挂载前状态------");
//console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
//console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
//console.group("------mounted 挂载结束状态------");
//console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
//console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
//console.group("beforeUpdate 更新前状态===============》");
//console.log("%c%s", "color:red", "el : " + this.$el);
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data);
//console.log("%c%s", "color:red", "message: " + this.message);
},
updated: function() {
//console.group("updated 更新完成状态===============》");
//console.log("%c%s", "color:red", "el : " + this.$el);
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data);
//console.log("%c%s", "color:red", "message: " + this.message);
},
beforeDestroy: function() {
//console.group("beforeDestroy 销毁前状态===============》");
//console.log("%c%s", "color:red", "el : " + this.$el);
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data);
//console.log("%c%s", "color:red", "message: " + this.message);
},
destroyed: function() {
//console.group("destroyed 销毁完成状态===============》");
//console.log("%c%s", "color:red", "el : " + this.$el);
//console.log(this.$el);
//console.log("%c%s", "color:red", "data : " + this.$data);
//console.log("%c%s", "color:red", "message: " + this.message);
}
};
</script>
<style lang="less" scoped>
#HelloWord {
width: 100%;
height: 100%;
div {
width: 100%;
height: 75px;
line-height: 75px;
font-size: 25px;
}
}
</style>
import vue from "vue"
vue.component("FooterTab",{
template:`
<div>
<router-link tag="li" to="/">首页</router-link>
<router-link tag="li" to="/genggai">修改数据</router-link>
</div>
`
})
修改store的值
<template>
<div id="Genggai">
<h1>{{msg}}</h1>
<div @click="xiugai">{{name}}</div>
<div @click="zaici">{{name}}</div>
<FooterTab></FooterTab>
</div>
</template>
<script>
//import store from "../store/index.js"
import FooterTab from "./component/FooterTab.js";
//console.log(this)
export default {
name: "Genggai",
data() {
return {
msg: "这是修改store的页面",
name: this.$store.state.name
};
},
mounted: function() {},
methods: {
xiugai: function() {
this.name = "11111";
this.$store.commit("xiugai", "11111");
//console.log("修改页面")
},
zaici: function() {
this.name = "小帅哥";
this.$store.dispatch("zaici", "小帅哥");
}
}
};
</script>
package.json
{
"name": "vuepage",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"es6-promise": "^4.2.4",
"less": "^3.7.1",
"less-loader": "^4.1.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"install": "^0.12.1",
"less": "^3.7.1",
"less-loader": "^4.1.0",
"node-notifier": "^5.1.2",
"npm": "^6.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}