创建vue项目

1.package.json
{
“name”: “vue_project1”,
“version”: “1.0.0”,
“description”: “”,
“private”: true,
“main”: “main.js”,
“scripts”: {
“dev”: “webpack-dev-server --config ./config/webpack.dev.js”,
“build”: “webpack --config ./config/webpack.prod.js”,
“start”: “live-server ./dist”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“@babel/core”: “^7.9.0”,
“@babel/plugin-proposal-class-properties”: “^7.8.3”,
“@babel/plugin-transform-runtime”: “^7.9.0”,
“@babel/preset-env”: “^7.9.0”,
“@babel/runtime”: “^7.9.2”,
“babel-loader”: “^8.1.0”,
“babel-plugin-component”: “^1.1.1”,
“clean-webpack-plugin”: “^3.0.0”,
“copy-webpack-plugin”: “^5.1.1”,
“css-loader”: “^3.5.0”,
“file-loader”: “^6.0.0”,
“html-webpack-plugin”: “^4.0.4”,
“less”: “^3.11.1”,
“less-loader”: “^5.0.0”,
“live-server”: “^1.2.1”,
“style-loader”: “^1.1.3”,
“url-loader”: “^4.0.0”,
“webpack”: “^4.42.1”,
“webpack-cli”: “^3.3.11”,
“webpack-dev-server”: “^3.10.3”,
“webpack-merge”: “^4.2.2”
},
“dependencies”: {
“@babel/polyfill”: “^7.8.7”,
“axios”: “^0.19.2”,
“element-ui”: “^2.13.0”,
“html-withimg-loader”: “^0.1.16”,
“vue”: “^2.6.11”,
“vue-loader”: “^15.9.1”,
“vue-loader-plugin”: “^1.3.0”,
“vue-router”: “^3.1.6”,
“vue-template-compiler”: “^2.6.11”,
“vuex”: “^3.1.3”
}
}
2…gitignore
.DS_Store
node_modules
/dist

local env files

.env.local
.env.*.local

Log files

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Editor directories and files

.idea
.vscode
*.suo
.ntvs
*.njsproj
*.sln
*.sw?

3…babelrc
{
“presets”: [
“@babel/env”
],
“plugins”: [
“@babel/plugin-proposal-class-properties”,
“@babel/plugin-transform-runtime”
]
}
4.webpack.base.js
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
const CopyWebpackPlugin = require(‘copy-webpack-plugin’)
const webpack = require(‘webpack’)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

function resolve (dir) {
return path.join(__dirname, ‘…’, dir)
}

// webpack的配置文件遵循着CommonJS规范
module.exports = {
entry: ‘./src/main.js’,
output: {
// path.resolve() : 解析当前相对路径的绝对路径
// path: path.resolve(’./dist/’),
// path: path.resolve(__dirname, ‘./dist/’),
path: path.join(__dirname, ‘…’, ‘./dist/’),
// filename: ‘bundle.js’,
filename: ‘[name].bundle.js’,
// publicPath: ‘/’
},
// 开启监视模式, 此时执行webpack指令进行打包会监视文件变化自动打包
// watch: true
plugins: [
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘./src/index.html’,
}),
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
// new CopyWebpackPlugin([
// {
// from: path.join(__dirname, ‘assets’),
// to: ‘assets’
// }
// ]),
new webpack.BannerPlugin(‘baobao666!’)
],
module: {
rules: [
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 233: …loader'] }̲, { test:…/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’] },
// { test: /.s(a|c)ssKaTeX parse error: Expected 'EOF', got '}' at position 55: …'sass-loader'] }̲,c { …/,
use: {
loader: ‘url-loader’,
options: {
limit: 5 * 1024,
outputPath: ‘images’,
name: ‘[name]-[hash:6].[ext]’
}
}
},
{ test: /.(woff|woff2|eot|svg|ttf)KaTeX parse error: Expected 'EOF', got '}' at position 22: …: 'url-loader' }̲, { …/,
use: {
loader: ‘babel-loader’,
// options: {
// presets: [’@babel/env’],
// plugins: [
// ‘@babel/plugin-proposal-class-properties’,
// ‘@babel/plugin-transform-runtime’
// ]
// }
},
exclude: /node_modules/,

  },
  {
    test:/\.vue$/,use:'vue-loader'
  },
  // {
  //   test: /\.(htm|html)$/i,
  //   loader: 'html-withimg-loader'
  // },
  // {
  //   // 用于解析jQuery模块的绝对路径
  //   test: require.resolve('jquery'),
  //   use: {
  //     loader: 'expose-loader',
  //     options: '$'
  //   }
  // }
]

},
resolve:{
// extensions: [’.js’, ‘.vue’, ‘.json’],
alias:{
“vue$”:“vue/dist/vue.js”,
‘@’: resolve(‘src’),
// ‘common’: resolve(‘src/common’)
}
}
}

4.1webpack.dev.js
const merge = require(‘webpack-merge’)
const baseConfig = require(’./webpack.base.js’)
// 引入webpack
const webpack = require(‘webpack’)
// webpack的配置文件遵循着CommonJS规范
module.exports = merge(baseConfig, {
mode: ‘development’,
// 开启监视模式, 此时执行webpack指令进行打包会监视文件变化自动打包
// watch: true
devServer: {
open: true,
hot: true, // 开启热更新
compress: true,
port: 8080,
// contentBase: ‘./src’
proxy: {
// /api/getUserInfo
// 当前端请求 /api 地址时, 会将请求转发到
// http://localhost:9999/api
// 举例: 客户端现在请求的时 /api/getUserInfo
// 此时会将请求转发到: http://localhost:9999/api/getUserInfo
// ‘/api’: ‘http://localhost:9999’,
// 此时会将请求转发到: http://localhost:9999/getUserInfo
// ‘/getUserInfo’: ‘http://localhost:9999’
‘/api’: {
target: ‘http://localhost:9999’,
// 转发请求时不会携带 /api
// http://localhost:9999/getUserInfo
pathRewrite: {
‘^/api’: ‘’
}
}
}
},
devtool: ‘cheap-module-eval-source-map’,
plugins: [
new webpack.DefinePlugin({
IS_DEV: ‘true’,
// test: ‘1 + 1’, // DefinePlugin会解析定义的环境变量表达式, 当成JS执行
// test2: ‘“zs”’
})
]
})

4.2webpack.prod.js
const merge = require(‘webpack-merge’)
const baseConfig = require(’./webpack.base.js’)
const webpack = require(‘webpack’)

module.exports = merge(baseConfig,{
mode:‘production’,
devtool: ‘none’,
plugins:[
new webpack.DefinePlugin({
IS_DEV:‘false’
})
]
})

5.main.js
import Vue from ‘vue’
// import Vue from ‘…/node_modules/vue/dist/vue.js’
import App from ‘./App.vue’

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

import router from ‘@/router/index’
import store from ‘@/store/index.js’

new Vue({
el:’#app’,
router,
store,
render:function(createElement){
return createElement(App)
}
// components:{login}
})

6.axios.js
let host = ‘http://192.168.1.22:9999’
if (!IS_DEV) {
host = ‘http://www.itheima.com’
}
let baseURL = host +’/api/private/v1/’

// 导入axios
import axios from ‘axios’
// 导入路由
import router from ‘…/router/index’
// 弹框
import Vue from ‘vue’

// 创建副本
export const managerAxios = axios.create({
// 基地址
baseURL
})

// 添加axios拦截器 拦截请求和响应

// 添加请求拦截器
managerAxios.interceptors.request.use(
function(config) {
// 请求成功触发
console.log(‘请求成功’)
// 添加请求头
// 添加token
// config.headers.Authorization = window.localStorage.getItem(‘token’)
return config
},
function(error) {
// 请求失败触发
return Promise.reject(error)
}
)

// 添加响应拦截器
managerAxios.interceptors.response.use(
function(response) {
// 响应成功触发
console.log(‘响应成功’)
// console.log(response)
if (
response.data.meta.status == 400 &&
response.data.meta.msg == ‘无效token’
) {
// 伪造的token 坏人
// 删掉他
window.localStorage.clear()
// 打回去
router.push(’/login’)
// 弹框
new Vue().$message.error(‘登陆失败’)
}
return response
},
function(error) {
// 响应失败触发
return Promise.reject(error)
}
)

7.router.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import Foo from ‘@/layout/Foo.vue’
import Bar from ‘@/layout/Bar.vue’
import Index from ‘@/layout/Index.vue’
import Login from ‘@/layout/Login.vue’

const routes = [
{
path:’/index’,
component:Index,
children:[
{
name: ‘foo’,
path: ‘/foo’,
component: Foo,
meta: {
title: ‘’,
// requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
}
},
{
name:‘bar’,
path: ‘/bar’,
component: Bar,
meta: {
title: ‘’,
// requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
}
},
]
},
{
name:‘login’,
path: ‘/login’,
component: Login,
meta: {
title: ‘’,
requireAuth: false, // 添加该字段，表示进入这个路由是需要登录的
}
}
]

Vue.use(VueRouter)
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 增加导航守卫
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth == false) {
next()
} else {
// 登录状态判断
if (localStorage.getItem(‘token’) != undefined) {
// 去吧
next()
} else {
// 弹框
// 去登录页
router.push(’/login’)
}
}
})
export default router