vue-cli 基本配置

DesGemini 发布于2019-08-26 10:16 / 3068人阅读

摘要：在中声明，方便全局引用书写方法同方法一致。查阅配置行为。查阅配置代理五备注路径表示文件夹中已经配好的路径

在vue3.0开始普及的时候，同时也收到了消息得知，从前使用vue2.0的各种依赖包在今后的更新中不再适用老版的vue，因此在新的项目中使用了vue3.0版本，以下是配置vue3.0的基础功能

安装

一、安装vue3.0

npm install -g @vue/cli

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105882.html

vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
深入认识vue-cli：能做的不仅仅是初始化vue工程

摘要：借助，我们通过非常简单的问答形式，方便地初始化一个工程，完全不需要担心繁复的配置等等。简单来说，就是不仅仅能初始化工程，理论上能够初始化一切工程，包括，等等等等，只要你有一份能够运行的模板，就能够通过进行工程的初始化。相信对于大部分使用过VueJS的同学来说，vue-cli是他们非常熟悉的一个工具。借助vue-cli，我们通过非常简单的问答形式，方便地初始化一个vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

xuweijian 2019-08-29 16:28 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

UsherChen 2019-08-26 12:18 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

ZoomQuiet 2019-08-02 11:20 评论0 收藏0
基于webpack模仿vue-cli（简略版）工程化

摘要：但高度封装的带来方便的同时，很多人却很少去关注轮子的内部结构，以至于当使用需要手动配置一些东西如编译实现代码压缩，移动端适配等配置的时候往往无从下手。废话不多说，下面我们来看看如何基于模仿实现项目工程化。从零搭建vue-cli 原创不易，如需转载请联系作者并注明出处 vue-cli的出现为vue工程化前端开发工作流提供了开箱即用的构建配置，减轻了烦人的webpack配置流程。但高度封...

GitCafe 2019-08-26 11:35 评论0 收藏0