使用vue编写前端项目————01 创建vue项目

1.准备工作

1.安装node.js 点击这里查看安装教程
2.安装vue-cli 打开cmd 输入 npm install -g vue-cli
3.安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org

2.创建项目

1.进入你想要创建项目的文件夹,右键打开cmd
2.创建项目 vue init webpack project-name 之后一路回车不要管
3.进入项目 cd project-name
4.打包项目 cnpm install -S
5.加入vuex cnpm i vuex -S
6.加入axios cnpm i axios -S
7.加入饿了么ui cnpm i element-ui -S

8.修改vueRouter
在src下找到router文件夹,删除里面所有内容，然后创建index.js和routes.js。具体如下

**//routes.js**
/**
 *../pages/home.vue标识文件夹下的vue文件，home为该组件所属模块，标识属于哪一类页面下的组件。
 */
const Home = r => require.ensure([], () => r(require('../pages/home.vue')), 'home')
const Login = r => require.ensure([], () => r(require('../pages/login.vue')), 'login')
export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/login',
    component: Login
  }
]

/**
 *index.js
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})
export default router

9.配置vuex
在src下建立store文件夹,下面配置index.js和user.js。具体如下

/**
 *user.js
 */
const state = {
  user: {}
}
const mutations = {
  setUser (state, user) {
    state.user = user
  }
}
const getters = {
  getUser: state => state.user
}
const actions = {
  setUserPhone (state, phone) {
    state.user.phone = phone
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}
/**
 *index.js
 */
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

10.创建axios实例配置
在src下建立utils文件夹,下面配置httpUtil.js。具体如下
在配置httpUtil.js前，先找到package.json文件，按住ctrl+f输入dependencies，找到dependencies。查看是否有如图下的依赖没有的话，请添加。
在里面添加上"qs": "^6.5.2" 即可
如图:
这里写图片描述

import axios from 'axios'
import router from '../router/index'
import Qs from 'qs'

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  baseURL: process.env.API_HOST,
  transformRequest: [function (data) {
    data = Qs.stringify(data)
    return data
  }]
})
/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = localStorage.getItem('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})
/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    localStorage.removeItem('token')
    router.replace({
      path: '/login',
      query: {redirect: router.currentRoute.fullPath}
    })
  } else {
    localStorage.setItem('token', response.headers['token'])
  }
  return response
}, error => {
  return Promise.reject(error)
})

export default http

11.在main.js下配置element-ui,http,router,store等信息
具体如下

import Vue from 'vue'
import ElementUI from 'element-ui'
import router from './router/index'
import store from './store/index'
import 'element-ui/lib/theme-chalk/index.css'
import https from './utils/httpUtil'
import App from './App'

Vue.use(ElementUI)

Vue.config.productionTip = false

Vue.prototype.$http = https

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

好了到此为止初步的配置，已经完成了，下次会使用这个搭建一个后台系统。