vue-cli 基本配置
在vue3.0开始普及的时候,同时也收到了消息得知,从前使用vue2.0的各种依赖包在今后的更新中不再适用老版的vue,因此在新的项目中使用了vue3.0版本,以下是配置vue3.0的基础功能
安装
一、 安装vue3.0
npm install -g @vue/cli
or
yarn global add @vue/cli
查看版本:vue -V 显示应该是3.0以上的版本
二、创建项目
2.1 代码创建
vue create XXX(项目名称) default 是 使用默认配置 Manually select features 是 自定义配置
2.2 界面创建
vue ui 自动打开浏览器显示界面(部分浏览器不支持显示)
创建新项目:
使用
通过:npm run serve启动程序
一、 vuex的使用
1.1 依照2.0的使用方法:
根据2.0的原始方法,将vuex分为state.js、mutation.js、getter.js、action.js四个文件进行vuex的修改。
在main.js中声明store,方便全局引用:
import store from "./store/index";
Vue.prototype.$store = store;
书写方法同2.0方法一致。
1.2 按照3.0的使用方法:
原理:等同于2.0,只是将4个文件放在了一起,可进行拆分或者直接修改文件。
state.js:
const state = { test: '' // 这是一个测试数据 } export default state;
mutation.js
const mutations = { changeTest(state, payload) { state.test = payload.test; } } export default mutations;
getter.js
const getters = { getTest(state) { return state.test; } } export default getters;
action.js
const actions = { changeTest(store, payload) { store.commit({ type: 'changeTest', test: payload }) } } export default actions;
index.js -------- 将对应的四个文件进行整合
import Vue from 'vue'; import Vuex from 'vuex'; import actions from './action'; import getters from './getter'; import mutations from './mutation'; import state from './state'; Vue.use(Vuex); export default new Vuex.Store({ state, actions, getters, mutations });
二、跳转
同样在main.js文件中声明:import router from "./router";
(在安装项目时,如果手动选择了router,不需要手动添加声明)
三、 数据请求
这里采用的是2.0的数据请求模式:
3.1 将2.0框架中services文件夹复制到src文件夹下。
3.2 下载对应的ajax依赖。
cnpm install axios --save
3.3 新建目录services
配置axios文件 ------- 已解决前端跨域
import axios from 'axios'; import baseUrl from '../config'; // 这里设置了一个文件作为所有请求的基础ip地址 // 添加请求拦截器 var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.interceptors.request.use(function (config) { if (config.method === 'post' || config.method === 'put' || config.method === 'delete') { // POST传参序列化 // console.log(config.data); // config.data = Qs.stringify(config.data); // config.data = Qs.stringify(config.data); } return config; }, function (error) { // 预处理请求错误(error) return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 预处理响应数据(response)如果数据当中有不要的部分,就截留 // console.log(response) return response; }, function (error) { // 预处理响应错误(error) // alert(error); return Promise.reject(error); }); export default function(url, { // 不传时,默认参数 method = 'get', timeout = 180000, data = {}, cancelToken = '', headers = {'Content-Type': 'application/json'}, // application/x-www-form-urlencoded;charset=UTF-8; responseType = 'json' }) { const config = { method: method, timeout: timeout, url: url, // 如果URL是完整的,包含域名,则下方的域名不会被拼接 baseURL: baseUrl.URL_CNODEJS, // 域名,在最外层的config.js当中可以修改,请求目标服务器域名配置,结合我们自己的项目,在项目放置到服务器上时,就是将域名替换成192.168.1.3 data: data, canelToken: cancelToken, // 关闭请求 headers: headers, responseType: responseType }; return axios(config); }
config.js
// 请求目标服务器域名配置 const DOMAIN_NAME = { URL_CNODEJS: 'http://192.168.1.155:8040' // 测试环境 }; export default DOMAIN_NAME;
server.js ----- 跟axios文件同目录,将所有请求写在这里
import axios from '../services/axios'; const server = { getTest() { return axios('bservice/test', { method: 'get' }) } } export default server;
3.4 在main.js文件引入:
import server from '../src/services/server'; Vue.prototype.$server = server;
3.5 使用
this.$server.getTest().then((res) => { // 请求测试 console.log(res.data) }).catch(err => { console.log(err.message); })
四、打包
由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js进行打包路径的设置:
网上有很多推荐的配置,大家可以随便找一个配置文件进行测试,我用了以下文件:
module.exports = { baseUrl: './', outputDir: 'dist', lintOnSave: true, runtimeCompiler: true, //关键点在这 // 调整内部的 webpack 配置。 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // 配置 webpack-dev-server 行为。 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理 proxy: null, // string | Object before: app => {} } }
五、备注
路径:@表示src文件夹(/node_modules/@vue/cli-service/lib/config/base.js中已经配好的@路径)