vue初始化一个项目完整版

1. 初始化vue项目

vue init webpack proname
           

1. 安装相关的依赖

//1）安装axios和element-ui
npm install --save axios
npm install --save element-ui
//2）安装scss，也可以不装
npm install [email protected] --save-dev
npm install [email protected]
npm install style-loader --save
//安装scss还需要在项目文件夹build下webpack.base.config.js中moudle下rules里添加以下代码：
{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
}
//安装完成scss后就可以在项目中使用<style  scope></style> 
//3)补充 npm 安装和卸载依赖的命令
npm install .. --save
npm install .. --save-dev
npm uninstall ..
npm uninstall .. -dev
           

1. 路由整合（router）

• 在router下新建modules目录，该目录下写多个路由配置文件

• modules目录下的文件编写

// 管理员模块router
const AdminRouter = {
    path: '/adminmain',
    name: 'adminmain',
    component: () => import('../../pages/admin/Main'),
    children: [
        {
            path: '/adminlist',
            name: 'adminlist',
            component: () => import('../../pages/admin/AdminList'),
        }
    ]
}

export default AdminRouter
           

• 编写index.js文件，可以在文件中写路由，也可以将modules下的路由引进该文件中

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import AdminRouter from './modules/admin'
import JonSeekersRouter from './modules/jobseekers'
import CompanyRouter from './modules/company'

export const prorouters = [
  {//管理员登录
    path: '/adminLogin',
    name: 'adminLogin',
    component: () => import('../pages/admin/Login'),
  },
  AdminRouter,
  JonSeekersRouter,
  CompanyRouter,
  {
    path: '/test',
    name: 'test',
    component: () => import('../pages/test/Test2'),
  },
]

const router = new Router({
  mode: 'history',
  routes: prorouters
})

export default router
           

1. axios的整合管理

• 在src下编写axios文件

/**
 * axios 配置
 */
import axios from 'axios'
import { Message } from 'element-ui'
//也可以加入区分环境（dev、pro）的逻辑来决定baseURL
const config = {
    baseURL: 'http://localhost:9898/',
    timeout: 2 * 60 * 1000,
    withCredentials: true,
}

function generateService(config) {
    const service = axios.create(config)
    useInterceptors(service)
    return service
}

function useInterceptors(service) {
    service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    // service.interceptors.request.use(
    //     (config) => {
    //         config.headers.ticket = sessionStorage.getItem('ticket') ? sessionStorage.getItem('ticket') : '123456'
    //         return config
    //     },
    //     (err) => Promise.reject(err),
    // )
    // http response 拦截器
    service.interceptors.response.use(
        (response) => response,
        (error) => {
            Message.error({
                message: '出错了，请重新操作或者刷新页面！', // '加载失败，请重新操作或者刷新页面或者重新登录'
            })
            return Promise.reject(error)
        },
    )
}

export function Service(config) {
    return generateService(config)
}

const service = Service(config)

export default service
           

• 编写api

  在src下新建api目录，在api下编写其他vue页面需要调用的接口

import service from '../../axios'

const baseURL = 'http://localhost:9898'
//当一个axios的url是绝对路径的时候会忽略baseURL
export function adminLogin(data) {
    return service({
        method: 'post',
        url:  baseURL + '/system/login',
        data: data,
    })
}
           

1. 运行项目

npm run dev