Vue2新项目创建流程

补充

如没有安装vue，需首先安装vue

npm install -g @vue/cli

一、创建命令

vue create 文件名

创建命令执行如出现以下错误：

以管理员身份运行Windows PowerShell

按顺序输入以下命令

 // 更改执行策略
1.Set-ExecutionPolicy RemoteSigned 
2.根据需要选择
//验证更改：
3.Get-ExecutionPolicy

输出结果为RemoteSigned，则更改已生效。

二、在这里插入代码片下载封装axios

npm install --save axios

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 250000
})
// request拦截器
service.interceptors.request.use(
  (config) => {
    // 是否需要设置 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?'
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName]
        var part = encodeURIComponent(propName) + '='
        if (value !== null && typeof value !== 'undefined') {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              const params = propName + '[' + key + ']'
              var subPart = encodeURIComponent(params) + '='
              url += subPart + encodeURIComponent(value[key]) + '&'
            }
          } else {
            url += part + encodeURIComponent(value) + '&'
          }
        }
      }
      url = url.slice(0, -1)
      config.params = {}
      config.url = url
    }
    return config
  },
  (error) => {
    console.log(error)
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm(
        '登录状态已过期，您可以继续留在该页面，或者重新登录',
        '系统提示',
        {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index'
        })
      })
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  (error) => {
    console.log('err' + error)
    let { message } = error
    if (message == 'Network Error') {
      message = '后端接口连接异常'
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时'
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常'
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

// auth文件

const TokenKey = 'Admin-Token'

export function getToken() {
  return sessionStorage.getItem(TokenKey)
}

export function setToken(token) {
  return sessionStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return sessionStorage.removeItem(TokenKey)
}

// errorCode

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

三、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 lintOnSave: true,  // 去除命名校验
 devServer: {
    open: true,  // 浏览器自动打开
    client: {
      overlay: false   // 关闭发生错误页面遮挡框，只在控制台显示
    },
  }
  publicPath: "./",
  outputDir: "dist",
  assetsDir:"static",  // 打包配置
  transpileDependencies: true,
})

四、配置开发、生产等环境

新建 .env.development 文件 写入一下内容

<!-- 开发环境 -->
# .env.development
NODE_ENV = development

#base_url
VUE_APP_BASE_API = 'https://www.baidu.com/'

新建 .env.production 文件 写入一下内容

// 生产环境
# .env.production
NODE_ENV = production

#base_url
VUE_APP_BASE_API = 'http://https://www.baidu.com/'

在 package.json文件夹配置加入下列内容

"scripts": {
    "serve": "vue-cli-service serve --mode development（和上述新建文件名称一样）",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

五、下载element ui组件

// 下载
npm i element-ui -S

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

new Vue({
  el: '#app',
  render: h => h(App)
});

六、路由配置

基础路由配置

<!-- 首页 -->
{
    path: '/index',
    menu: "首页",
    component: () => import("@/views/login.vue")
  },

// <!-- 重定向 -->
{
    path: '/',
    redirect: "/index"
  },

// <!-- 404 -->
		{
    path: '*',
    name: '404',
    component: () => import('@/views/error.vue')
  }

	// 记得配置路由出口
	app.vue/ 一级路由页面 => <router-view />

二级路由配置

<!-- 首页 -->
	{
		path: '/index',
			menu: "首页",
			component: () => import("@/views/login.vue")，
		children: [
			{
				path: 'index',
				component: () => import('@/views/index'),
				name: 'Index',
				meta: { title: '首页', icon: 'dashboard', affix: true }
			}
		]
	},
		// 记得配置路由出口
	一级路由页面 => <router-view />

七、修改网站名称和图标

固定修改

-> public -> index.html

动态修改

{
path: '/businessScope',
	menu: "业务范围",
		component: () => import("@/views/AboutUs/components/businessScope/businessScope.vue"),
		meta: {
		title: "业务范围",
			},
			},
// 必须写在路由最后边
router.beforeEach((to, form, next) => {
	if (to.meta.title) {
		document.title = to.meta.title
	} else {
		document.title = '金益通政府绩效高端智库'
	}
	next()
})	

八、打包

npm run build