前言
在上篇教程中,我用webpack4手动搭建了Vue的开发环境,包括了生产环境和开发环境,不知道能否帮助到大家学习(捂脸)。。。
拖更很久,不好意思,最近辞职了忙于找工作,生活还是有点烦躁的,但是在这里就没必要把负能量传给你们了!!
好了,按照约定,这篇文章我会用上次搭建好的Vue开发环境去实现todoList项目,不过其实重点是教会大家手动搭建Vue开发项目(尴尬脸),毕竟todoList大家肯定是写过的,哈哈!!
所以我们用不一样的方式去写,往复杂去写,本人水平有限,大家参考参考就好!!
好了,开始!!!
Vue项目文件夹
首先,现在根目录下创建src文件夹,然后在开始在里面创建文件夹
好了,现在开始分析一下各个文件夹的作用了
- assets用于存放静态资源
- components用于存放组件模块
- router用于设置
vue-router
- store用于设置
vuex
- views用于存放页面
- App.vue是我们的主组件,所有页面都是在App.vue下进行切换的
- main.js是webpack打包的入口文件
入口文件
main.js
是webpack打包的入口文件
以下是main.js
的基本配置
Vue主页面
App.vue
是Vue项目的主页面,所有的页面都是在App.vue下进行切换的
在main.js
里面有一段代码:
import App from './App'
就是在入口文件上引入App.vue
页面,通过vue-loader
编译得到的主页面
一些全局的样式可以编写在App.vue
文件下,这样就不用重复在其他页面上添加了!
基本的App.vue
模板
vue-router
接下来我们开始来使用路由vue-router
首先需要安装vue-router
,在命令行上运行:
npm i vue-router --save-dev
在router
文件夹里面创建文件index.js
、routes.js
index.js
为vue-router
入口文件
在views
文件夹下创建相应页面用来做路由的测试
routes.js
为vue-router
的路由配置文件,配置如下
配置好后在入口文件router/index.js
里面引入
import routes from './routes'
运行routes.js
配置
export default ()=>{
return new VueRouter({
routes
})
}
复制代码
最后在webpack打包入口文件main.js
里面引入router/index.js
进行设置,即可使用vue-router
import createRouter from './router'
const router = createRouter();
new Vue({
el: '#app',
router,
render: h=> h(App),
});
复制代码
测试效果,在命令行上运行npm run dev
,分别在浏览器上切换路由,如果跳转到对应的页面,即证明vue-router
配置成功!!!
vuex
好了,接下来我们开始设置vuex
了
首先要安装vuex
,在命令行上运行命令
npm i vuex --save-dev
在store
文件夹里面分别创建文件
- action.js(可以异步执行mutations.js里面的方法)
- mutations.js(定义修改state状态的方法,但是必须同步执行方法)
- mutations_types.js
- state.js(定义vue状态属性)
- index.js(入口文件)
开始配置index.js
入口文件
最后在webpack打包入口文件main.js
里面引入store/index.js
进行设置,即可使用vuex
import createStore from './store'
const store = createStore();
new Vue({
el: '#app',
store,
render: h=> h(App),
});
复制代码
测试效果,自行定义一个全局状态,然后对状态进行读取和修改,若成功证明配置完成!!!
vuex 的更多使用方法可以参考vuex文档
todoList
好了,说完上面的配置,现在开始说todoList
说到todoList,我相信很多人都已经在入门vue的时候会接触到的所以在这里我就不详细说了
todoList就是对事件设置状态,all
、 completed
or active
,就是如此
todoList实现还是很简单的,但是这里我们就多此一举用vuex
来实现吧,这简直就是为了使用vuex
而使用vuex
毕竟用来练手嘛,所以没必要讲究太多,我觉得自己的项目多点折腾,这是好事!!嘻嘻。。。
把todoList分为上中下三个组件,然后在在views/todo.vue
里面引入组件
定义全局状态
mutations_types.js
//保存添加的数据
export const DATASAVE = 'DATASAVE'
//筛选全部数据
export const DATAALL = 'DATAALL'
//筛选完成数据
export const DATACOMPLETED = 'DATACOMPLETED'
//筛选未完成数据
export const DATAACTIVE = 'DATAACTIVE'
//获取当前按钮状态
export const HASBUTTON = 'HASBUTTON'
复制代码
mutations.js
import * as types from './mutations_types.js'
export default {
//保存全部数据
[types.DATASAVE](state,data) {
state.todo.push(data.data);
},
//获取全部数据
[types.DATAALL](state) {
let data = state.todo;
state.filterToDo = [];
data.forEach(item => {
state.filterToDo.push(item);
})
},
//获取完成数据
[types.DATACOMPLETED](state) {
let data = state.todo;
state.filterToDo = [];
state.filterToDo = data.filter(item => item.status == 'Completed');
},
//获取未完成数据
[types.DATAACTIVE](state) {
let data = state.todo;
state.filterToDo = [];
state.filterToDo = data.filter(item => item.status == 'Active'|| item.status == 'All') ;
},
//获取当前选中的按钮状态
[types.HASBUTTON](state,data) {
state.status = data.data;
}
}
复制代码
通过actions.js里面定义方法异步执行mutations方法
import * as types from './mutations_types'
export default ({
//保存数据
data_save: ({
commit
},{
data
}) => {
return new Promise((resolve,reject) =>{
commit(types.DATASAVE,{
data
});
resolve(data);
});
},
//筛选all数据
dataall: ({
commit
}) => {
return new Promise((resolve,reject)=>{
commit(types.DATAALL);
resolve();
});
},
//筛选未完成数据
dataactive: ({
commit
}) => {
return new Promise((resolve,reject)=>{
commit(types.DATAACTIVE);
resolve();
})
},
//筛选完成数据
datacompleted: ({
commit
}) => {
return new Promise((resolve,reject) => {
commit(types.DATACOMPLETED);
resolve();
})
},
//获取当前按钮选中状态
hasbutton: ({
commit
},{
data
}) => {
return new Promise((resolve,reject) =>{
commit(types.HASBUTTON,{
data: data
});
resolve();
})
}
})
复制代码
然后通过this.$store.dispatch()
调用方法即可实现todoList的功能。。。
总结
好像实现todoList这里我写得太简陋了(捂脸,尴尬)
其实本篇文章主要是教你们手动搭建Vue项目文件夹的,实现todoList只是顺带的功能,为了验证webpack
配置音乐文件的成功我还在主页面里面设置了音乐
好了,结合上篇的教程,你们基本上是学会了用webpack
手动搭建Vue运行环境
并且手动配置了vue-router
和vuex
,也实现了小项目,相信你们是有所收获的,我相信着(强颜欢笑)
感觉这篇教程写得不是很好,有点草草了事的态度。。。
因为最近我也是在求职的道路上,所以精力大多花费在求职上,求职总是会让人心累的!!
好了,这边教程也就完结了,有什么错误或者不足,请大神指出,膜拜各位大佬!!
最后,送给大家一句话:相信明天会更好!