Vue_cli 3.0基础项目搭建

在vue2.0的时候我们下载cli的会自动集成webpack配置文件，而vue3.0以后配置文件就不会集成了都是自己在根目录新建文件配置，那么以前用习惯2.0的朋友就有些不习惯还得重新找资料学习接下来我会整理一些3.0的用法。

安装全局vue3.0命令下载cli脚手架
如果电脑有以前的旧版本必须先卸载掉npm uninstall vue-cli -g

//安装全局命令
npm install @vue/cli -g
//下载脚手架 （vue_project）项目名称
//下载下来的cli没有配置文件需要自己去新建配置文件
vue create vue_project

//和2.0旧版本相识用法，自动集成配置文件的3.0版本
npm install -g @vue/cli-init
//下载脚手架 （vue_project）项目名称
//下载的cli自动集成配置文件，和2.0版本用法基本一致
vue init webpack vue_project

3.0集成目录简绍

public 文件夹
1.favicon.ico 是网站图标
2.index.html 页面入口文件

src 文件夹
main.js 入口js
assets 存放静态文件
components 存放公用组件
App.vue 入口vue文件

.eslintrc.js 配置
.gitignore 指定文件无需提交到git上
balel.config.js 使用一些预设
package.json 项目描述及依赖
package-lock.json 版本管理使用的文件

上面的目录是你下载脚手架时自动集成的肯定不利于我们开发，一般我们开发都会加一些自己的目录扩展，下面的一张截图相信大家一看就知道每个目录的用途

image.png

多环境运营

我们做的项目肯定会在不同的环境下运营，最常用的三种环境（开发，生产，测试），这样呢我们就会做一些环境的配置，避免来回更换地址相关配置的麻烦。

第一种方法：
在项目根目录新建文件（.env.development，.env.production，.env.test ）
.env.development 模式用于serve，开发环境。
.env.production模式用于build，线上环境。
.env.test 测试环境

//分别文件内写上配置
VUE_APP_BASE_API = '需要请求API'

//当需要用到该变量取值时
process.env.VUE_APP_BASE_API

//更改package.json文件
"scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

第二种方法：
在config文件新建index.js文件，根据全局的环境变量来进行判断

const modeUrlObj = {
  // 生产环境
  'production': {
    baseURL: '需要请求API',
    authBaseURL: ''
  },
  // 开发环境
  'development': {
    baseURL: '需要请求API',
    authBaseURL: ''
  },
  // 测试环境
  'test': {
    baseURL: '需要请求API',
    authBaseURL: ''
  }
}
export default modeUrlObj[process.env.NODE_ENV]
//同样需要更改package.json文件，package.json与方法一配置相同

引用的方法

import config from '../config/index' // 路径配置
config.baseURL  // 对应环境api

//运行命令
npm run dev // 开发环境
npm run test // 测试环境
npm run build // 正式环境打包
npm run build:test // 测试环境打包

vue路由

//下载路由
cnpm install vue-router --save

在router文件新建index.js文件,用来配置路由表

//src/router/index.js文件
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/home';
Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'Home',
        component: Home
    }]
})

export default router;

在main.js中全局引入挂载路由

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

在App.vue文件中写入<router-view></router-view>这样就可以正常使用了

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

axios封装全局引用

src/utils/request.js

// 引用环境全局环境
import config from '../config/index.js';
import axios from 'axios'

// 创建axios请求实例
const request = axios.create({
    baseURL: config.baseURL, // 设置跨域代理接口统一的前置地址
    timeout: 1000,
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': localStorage.getItem('token')
    }
})

// 添加请求拦截器
request.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function(response) {
    // 只返回数据
    return response.data
}, function(error) {
    const status = error.response.status
    if (status >= 500) {
        alert('服务繁忙请稍后再试')
    } else if (status >= 400) {
        alert(error.response.data.message)
    }
    // 对响应错误做点什么
    console.dir(error)
    return Promise.reject(error)
})

const get = (url, data) => request.get(url, {
    params: data
})
const post = (url, data) => request.post(url, data)
const DELETE = (url, data) => request.delete(url, data)
const head = (url, data) => request.head(url, data)
const options = (url, data) => request.options(url, data)
const put = (url, data) => request.put(url, data)
const patch = (url, data) => request.patch(url, data)

export {
    get,
    post,
    DELETE,
    put,
    head,
    options,
    patch
}

src/api/index.js(接口不多的时候一个js文件就够用了，当接口过多时可以用index.js文件做主入口文件，新建其他模块文件便于管理)

import { post } from '../utils/request.js';
// 在组件中可以直接 this.postLogin(传递参数).then()调用
const install = function(Vue) {
    // 登录
    Vue.prototype.postLogin = function(body) {
        return post('/user/login', body)
    }
}
export default install;

main.js中全局挂载接口方法（这样就可以在所有组件中调用了）

// 挂载全局请求方法
import Api from './api/index';
Vue.use(Api);

在组件中调用接口

this.postLogin(data).then(res=>{
    console.log(res,'成功返回数据')
}).catch(err=>{
    console.log(err,'失败时返回错误')
})

全局配置

vue2.0的时候我们都在集成的webpack中配置我们需要的第三方插件，现在3.0我们需要在项目根目录新建vue.config.js配置文件。

//vue.config.js全局配置文件
module.exports = {
    //配置css loader
    css: {
        loaderOptions: {
            sass: {
                // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData 旧版本中使用 data
                additionalData: `@import "@/assets/style/main.scss";
                @import "@/assets/style/minxin.scss";`
            }
        }
    },
    // 配置
    configureWebpack: {
        resolve: {
            // 配置别名
            alias: {
                'assets': '@/assets',
                'com': '@/components'
            }
        }
    },
    // 跨域代理
    devServer: {
        proxy: {
            '/api': {
                target: '',
                changeOrigin: true
            }
        }
    },
    publicPath: './', // 编译后的地址，可以根据环境进行设置
    // lintOnSave: true, // 是否开启编译时是否不符合eslint提示
}

具体可以参照官网的配置说明，我只是配了一下常用的。
这是我自己基于脚手架搭建的基础项目为了方便使用，大家不嫌弃的话也可以拿去使用vue3.0，一些没有的功能后续还会继续完善。