store文件夹 vue_Vue基础学习笔记

Vue-cli创建基础项目

1、全局安装Vue-cli,命令行输入

npm install -g @vue/cli

2、创建项目

vue create my-project(项目名可以更改)

3、选择Manually selsect features ，选择Babel、Router、Vuex、CSS Pre-processors以及Linter依赖，回车。

4、这里我们选择使用历史路由模式，输入Y，回车。以此来屏蔽很丑的hash，但如果使用了历史路由，当我们请求后台一个不存在的资源时，就会返回404。以此我们还需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。这个后面再配置。

5、这里选择第二个，node环境下的sass，回车

6、这里选择linter的语法校验规则，选择标准的就好，后面可以再自定义。

7、上面选择了语法校验的规则，这里来选择何时触发语法校验。因为便于从一开始养成良好的代码规范，这里选择每次保存就触发语法校验。

8、这里选择依赖配置是全部存放在一个package.json文件里，还是分开文件来配置。过多的配置如果全部存放在一个文件里，随着配置项的增多，势必会使得该文件代码量大，不易维护，这里强烈建议分开文件存储。我们选择第一个，回车。

9、这里选择是否保存预设，如果保存，下次再使用脚手架创建项目时，就可以直接使用本次的预设配置来直接创建项目，不需要再选择一遍。如果想要删除已保存的预设，在C盘用户目录下找到一个名为.vuerc的文件，直接删除即可。这里我们选择保存预设，并取名为my-project。

10、回车之后等待下载依赖，这可能需要一段时间，依赖下载完成后命令行输入：

cd my-project

进入项目文件夹，然后输入:

npm run serve

等待服务启动，启动完成后浏览器访问http://localhost:8080/，大功告成。

目录结构介绍

默认创建的项目结构并不能满足我的项目需求，我在此基础上添加了些许目录。

api：存放各种请求接口。

assets：存放一些静态资源，比如图片、字体等。

compoments：存放一些全局性的复用组件。

directive：存放一些全局指令。

router：路由专用目录。

store：Vuex专用目录。

styles：存放一些全局样式。

utils：存放一些可供复用的工具方法。

views：存放各个功能所对应的组件。

目录结构：

优化路由以及Vuex专用目录

src目录就是我们的项目主目录，我们对其进行一些基础修改。

1、router目录下新增router.js文件，我们使用该文件存放路由的基础配置，导出之后再当前目录下的index.js

里将其引入。将index.js的routers数组剪切到router.js文件里，并导出。

// router.js
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
export default routes

在index.js文件里引入

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router'  // 在这里引入router，使用ES6语法
Vue.use(VueRouter)  // 将路由引入到当前Vue实例中以供使用

const router = new VueRouter({   // 这里创建路由对象
  mode: 'history',  // 我们之前选择的历史路由
  base: process.env.BASE_URL,   // 基础路径，默认是 '/'
  routes
})

export default router

这样做主要是为了使代码层次更加规整清晰。

2、store目录下新建：actions.js、mutations.js、state.js三个文件，我们将Vuex的actions、mutations、state划分为三个独立根文件，便于维护，并分别将这三个文件在index.js文件里引入。

// actions.js
const actions = {
  // code
}
export default actions
// mutations.js
const mutations = {
  // code
}
export default mutations
// state.js
const state = {
  // code
}
export default state

当前store目录下新建modules文件夹，该文件夹下主要存放专一的组件状态，比如用户的信息，我们可以在该文件夹下新建user.js文件，同样可以在index.js文件里引入。

// store/modules/user.js
const state = {
  userName: '小明'
}
const actions = {
  // code
}

const mutations = {
  // code
}
export default {
  state,
  actions,
  mutations
}

index.js文件引入以上文件

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'   // 引入state.js
import actions from './actions' // 引入actions.js
import mutations from './mutations' // 引入mutations.js
import user from './modules/user'  // 引入moudles文件夹下的user.js
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations,
  modules: {
    user  // user在这里注册
  }
})