1. 下载脚手架
// 在终端中输入以下命令进行全局安装：
npm install -g @vue/cli
创建脚手架.png
2. 创建项目名
// 在项目的目录下打开终端创建
// vue create 【你的项目名称】
vue create appliction
创建XX项目.png
3. 创建项目配置（PgUp/PgDn 键上下切换更改选项，回车确定成功）
（1）手动选择安装
配置1.png
（2）根据自己的需求选择
配置2.png
（3）选择vue版本
配置3.png
（4）选择代码检测时的工具
配置4.png
（5）选择检测时机（保存时检测）
配置5.png
（6）如何存放配置（独立文件存放）
配置6.png
（7）可以将当前创建项目配置作为一个模板方便下次直接使用
配置7.png
保存当前预设为......(下次创建项目可以当作模板创建)：
配置8.png
4. vue项目就创建完成了
完成创建.png
5. 配置简介
（1）router配置
router依赖下载.png
// router--》 index.js配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import AboutView from '../views/AboutView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: AboutView
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
（2）axios配置
axios依赖.png
import axios from 'axios'
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 + '/appliction',
// 超时
timeout: 3000
})
// request拦截器
service.interceptors.request.use(config => {
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || '000000'
return code
}, error => {
console.log('err' + error)
})
export default service
（3）vuex依赖
vuex依赖.png
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {},
state: {
epfFlowId: ''
},
mutations: {
epfFlowIdData (state, id) {
state.epfFlowId = id
}
},
actions: {}
})
（4）下载完后在main.js文件的配置
main.js.png
（5）API 接口请求
import request from '@/utils/request'
// 请求接口
export function fun(data) {
return request({
method: 'post',
url: 'url路径',
data: {
...data // 入参
}
})
}
（6）环境配置
创建文件.env.development, .env.production文件分别配置对应环境的环境变量：
.env.development文件：
# 开发环境配置
ENV = 'development'
# 开发环境
# baseURL
VUE_APP_BASE_API = 'http://47.103.69.49:8080'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
.env.production文件：
# 生产环境配置
ENV = 'production'
# 生产环境
# baseURL
VUE_APP_BASE_API = 'http://113.106.84.20:8443'
package.json配置：
"scripts": {
"build-development": "vue-cli-service build --mode development",
"build-production": "vue-cli-service build --mode production",
}
App.vue打印验证是否拿到数据：
<script>
export default {
mounted () {
console.log(process.env, '环境变量')
console.log(process.env.VUE_APP_BASE_API, '生产环境变量')
}
}
</script>
（7）vue.config.js配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
// 项目部署的基本路径，默认 '/'
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
// 项目打包的根目录，默认 'dist'
outputDir: 'dist',
// 项目打包的静态资源存放目录，默认 '
assetsDir: '',
// 项目打包的index.html输出路径，默认 'index.html'
indexPath: 'index.html',
// 多页应用配置参数，默认 undefined
pages: undefined,
// 开发环境 eslint 异常信息提示位置，默认 'default' 在浏览器窗口提示，为 true 在控制台提示
lintOnSave: 'default',
// 项目打包是否生成js的 source map 调试包，默认 true，生产部署设置为false
productionSourceMap: false,
// css 配置
css: {
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中、生产环境下默认 true，开发环境下默认 false
extract: true,
// 是否开启 css 的 source map 调试，默认 false
sourceMap: false,
// 配置css的loader选项：css-loader、postcss-loader、less-loader、sass-loader，stylus-loader，默认 {}
loaderOptions: {}
},
// devServer 支持 webpack-dev-server 所有选项
devServer: {
open: true,
host: 'localhost',
port: 8080,
hot: true,
https: false,
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API + '/appliction', // 后端服务域名
secure: false, // 是否支持 https，默认 false
ws: true, // 是否支持 websocket
changeOrigin: true, // 是否支持跨域
pathRewrite: {
'^/': '/' // 路径片段重写
}
}
}
},
// 插件配置选项
pluginOptions: {
foo: {
// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
}
},
// babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
transpileDependencies: true
})
网友评论