在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中已经配好的@路径)
