vue项目启动

初始化项目

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