初始化项目
vuecli2.0安装(路由可选)
1.1-安装:npmi-gvue-cli
1.2-初始化vue项目:vueinitwebpack项目名称
1.3-项目安装过程:
?Projectname# 回车
?Projectdescription# 回车
?Author# 回车
?Vuebuildstandalone# => 运行时+编译 => 详见下面的问题1
?Installvue-router?# Yes
?UseESLinttolintyourcode?# Yes => 详见下面的问题2
?PickanESLintpresetStandard# standard
?Setupunittests# No
?Setupe2etestswithNightwatch?# No
?Shouldwerun`npm install`foryouaftertheprojecthasbeencreated?# (recommended) npm
vuecli3.0安装
1.1-安装:npmi-g@vue/cli
1.2-初始化vue项目:vuecreateXXX/vueui
1.3.运行:
-开发:npmrunserve
-发布:npmrunbuild
清除不需要的东西
清除 logo
清除 helloworld 组件
配置路由(vue脚手架3.0没有路由)
安装 : npm i vue-router
创建文件夹 router/ router.js
准备工作 router.js
router.js文件中
3.1导入vue
3.2导入路由
3.3vue安装路由
3.4实例化路由
3.5导出路由实例
// main.js
// 导入路由模块 + 挂载
四个步骤 :
入口 url 调试写
匹配规则 router.js
组件 component文件夹
出口 app.vue
配置 vuex
安装 : npm i vuex
引入 :
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
实例化 storeconst store = new Vuex.Store()
创建一个 store/store.js
导出 store 仓库, 挂载到 vue 实例上export default store
// actions(异步操作[提交mutation])
letactions={
// 异步删除 任务
//1. Action 可以包含任意异步操作。
//2. Action 提交的是 mutation，而不是直接变更数据。
// context 相当于 store
fn(context,payload) {
setTimeout(()=>{
context.commit('mutations中的方法',payload)
},0)
}
}
//方法(同步)
letmutations={
fn(state,payload){}
}
//计算属性
letgetters={
fn(state){}
}
//数据
letstate={
list:[]
}
let
// 实例化仓库
conststore=newVuex.Store({
// 严格模式
strict:true,
// 状态:数据 相当于vue里的data
state,
// 相当于之前 vue里的methods
mutations,
//计算属性
getters,
// actions(异步操作[提交mutation])
actions
})
// 导出 store
exportdefaultstore
