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