vue项目流程

项目流程

1.创建项目

（1）新建一个文件夹project（到时候创建的项目会放在这个文件夹里面）

（2）打开文件夹，在空白处按住shift的同时点击鼠标右键，点击“在此处打开Powershell窗口(S)”

（3）淘宝镜像（不是必须安装，速度可以快一点）
如果装了的话，后面命令中的npm全部要改成cnpm,此处我没有安装

npm install cnpm -g --registry=https://registry.npm.taobao.org

（4）如果已经全局安装了旧版本的 vue-cli(1.x 或 2.x)
此处我也没有安装过

npm uninstall vue-cli –g

（5）安装vue-cli3的包（有警告warn也没事）

npm install -g @vue/cli

（6）创建一个vue的项目，这个项目会放在一开始创建的project文件夹中，然后输入Y

vue create projectuser

（7）选择最后一项，自定义安装

（8）使用空格选择这几项，第一项没有也没关系

（9）选择2.x

（10)输入y

（11）选择node-sass，如果没有的选选dart-sass也没事

node-sass是自动编译实时的，dart-sass需要保存后才会生效。

（12）选择in dedicated config files

In dedicated config files 在专用配置文件中
In package.json 在package.json中

（13）将此保存为将来项目的预设

（14）进入项目所在目录cd projectuser 这个项目名是在（7）的时候创建的,，然后运行项目

（15）此时会出现端口号

（16）打开google浏览器，输入http://localhost:8080/即可

http://localhost:8080/

2.安装element-ui

（1）打开刚刚创建的项目的文件夹，按住shift的同时，点击鼠标右键，打开powershell窗口
这边要注意的是，打开的是创建的项目，而不是最开始自己新建的文件夹

（2）安装element-ui

npm i element-ui

（3）安装成功后能够在src同级的package.json中看到element-ui的版本

（4）在main.js 引入文件

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

（5）根据网址进行操作

https://element.eleme.cn/#/zh-CN/component/installation

3.安装Axios

（1）安装axios（在项目文件夹中按shift的同时点击右键打开powershell）

npm install axios

（2）在main.js 引入文件

import axios from 'axios';
Vue.prototype.$axios = axios;//将请求模块挂载到实例模型上

4.安装vuex

vuex （全局状态管理） 管理的数据是多页面需要共享的数据
（1）安装vuex

npm install vuex --save

（2）在src 下新建store文件夹，然后新建 index.js 文件
（3）main.js 引入注册

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

（4）挂载vuex

import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)

（5）创建vuex对象

const store = new Vuex.Store({
  state: {
    // 存放的键值对就是管理状态
    name: "hello"
  }
})
例
export default new Vuex.Store({
  state: {  url:"https://www.fastmock.site/mock/59b6f6c27e630b8f012ce26d1cc02210/api"
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

（6）取数据

this.$store.state.message
{
  {$store.state.message}}

5.配置联调文件

（1）新建config.js文件 此文件在src下views同级
（2）在 config.js文件 自定义配置文件，定义后台api地址

const config = {
     //后端api地址
     API_URL: "",
 };
export default config

这里可以在fastmook网站上建一个项目，模拟接口
接口根地址即为api地址

https://fastmock.site/#/login

（3）新建一个utils文件夹，此文件夹跟views同级
（4）在utils文件夹新建一个request.js 文件
（5）在request.js文件引入axios包

import request from "axios"

（6） 在request.js文件 将你新建的config.js文件引入进来

import config from "@/config"

（7）配置后台api地址，以及请求头token

const token = localStorage.getItem('token');
const service = request.create({
    baseURL: config.API_URL,
    headers: {
        "Authorization": token
    }
});

（8）封装axios response 响应参数，请求拦截

service.interceptors.response.use(
    response => {
        const res = response.data;
        return res
    },

    error => {
        console.log('err' + error);
        return Promise.reject(error)
    }
);

（9）导出

export default service

（10）新建一个api文件夹，在src文件夹下面
（11）新建接口模块文件 后缀名 为.js
例如我做的影院网站，可以命名为film,user等接口模块文件
（12）在你新建的接口模块文件，引入request.js 文件

import service from "../utils/request"

（13）配置相关接口

例如：export function Login(data){
    return service({
        url:'/api/user/login',
        method:'post',