【vue】vue3.x项目初始化

已于 2022-05-27 17:09:17 修改
阅读量581 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2021-08-08 10:42:52 首次发布
原文链接：www.baidu.com
版权

文章目录

前言

这种方式创建的项目在使用elementplus的时候，语法上会有eslint验证错误，需要禁用eslint验证
在这里插入图片描述

vue项目初始化

参考文档

https://www.freesion.com/article/70671403784/

出现的问题

Delete ␍eslint(prettier/prettier)

原因：https://www.cnblogs.com/jasonboren/p/12337002.html
解决办法1：https://blog.csdn.net/LPLIFE/article/details/105655178
在控制台执行命令：

git config --global core.autocrlf false

然后把本地代码提交，删掉本地仓库，重新拉取代码，就没问题了
解决办法2（不推荐，因为每个文件都需要改）：https://www.cnblogs.com/victorlyw/p/13589682.html
在这里插入图片描述

eslint 单双引号，末尾分号(不建议使用，因为原本使用eslint就是为了美化代码)

在项目根目录添加文件.prettierrc.json
解决项目代码中单引号变双引号，以及末尾自动添加分号

{
  "singleQuote": true,
  "semi": false
}

安装axios

执行命令

npm install axios -S
npm install qs -S

添加配置文件

config.js

export const baseURL = '/api'
export const rootFile = '/myApp/'

server.js

import Axios from 'axios'
import { baseURL } from './config.js'
import { Toast } from 'vant'
import qs from 'qs'
// import router from '../router/index'

// 请求地址
Axios.defaults.baseURL = baseURL
// 超时时间
Axios.defaults.timeout = 15000
// 允许携带cookie
Axios.defaults.withCredentials = true
// 请求头
Axios.defaults.headers = {
  // 'Content-Type': 'application/json;charset=UTF-8'
  // 'Content-Type': 'application/x-www-form-unlencoded'
  // 'Content-Type': 'multipart/form-data'
  'Content-Type': 'application/x-www-form-urlencoded'
}

// 发送到服务器前修改请求数据
Axios.defaults.transformRequest = [
  function(data) {
    return JSON.stringify(data)
  }
]

/**
 *loading配置
 */
let loading = {
  load: null,
  showLoading: true,
  loadingMsg: '加载中...'
}

/**
 * 请求拦截器
 */
Axios.interceptors.request.use(
  res => {
    if (loading.showLoading) {
      loading.load = Toast.loading({
        duration: 0,
        message: loading.loadingMsg,
        forbidClick: true
      })
    }
    return res
  },
  error => {
    errorMsg(error)
    return Promise.reject(error)
  }
)

/**
 * 返回拦截器
 */
Axios.interceptors.response.use(
  res => {
    if (loading.showLoading) {
      Toast.clear()
      loading.showLoading = false
    }
    failMsg(res.data)
    return res
  },
  error => {
    errorMsg(error)
    return Promise.reject(error)
  }
)

/**
 * putService put请求
 * @param {*} url
 * @param {*} params
 * @param {*} showLoading
 */
export const putService = (url = '', params = {}, showLoading = true) => {
  loading.showLoading = showLoading
  return new Promise((resolve, reject) => {
    Axios.put(url, qs.stringify(params))
      .then(res => {
        const { data } = res
        resolve(data)
      })
      .catch(err => {
        errorMsg(err)
        reject(err)
      })
  })
}

/**
 * getService get请求
 * @param {*} url
 * @param {*} params
 * @param {*} showLoading
 */
export const getService = (url = '', params = {}, showLoading = true) => {
  loading.showLoading = showLoading
  return new Promise((resolve, reject) => {
    Axios.get(
      url,
      { params: params },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      }
    )
      .then(res => {
        const { data } = res
        resolve(data)
      })
      .catch(err => {
        errorMsg(err)
        reject(err)
      })
  })
}

/**
 * postFile 文件请求
 * formData示例
 * let formData = new FormData()
 * formData.append("username", '张三')
 * formData.append("file", file)
 * @param {*} url
 * @param {*} formData
 * @param {*} showLoading
 */
export const postFileService = (
  url = '',
  formData = {},
  showLoading = true
) => {
  loading.showLoading = showLoading
  return new Promise((resolve, reject) => {
    Axios.post(url, formData, {
      headers: { 'Content-Type': 'multipart/form-data;' }
    })
      .then(res => {
        const { data } = res
        resolve(data)
      })
      .catch(err => {
        errorMsg(err)
        reject(err)
      })
  })
}

/**
 * postService post请求
 * ps：需要注意qs.stringify
 * @param {*} url
 * @param {*} params
 * @param {*} showLoading
 */
export const postService = (url = '', params = {}, showLoading = true) => {
  loading.showLoading = showLoading
  return new Promise((resolve, reject) => {
    Axios.post(url, qs.stringify(params), {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
      .then(res => {
        const { data } = res
        resolve(data)
      })
      .catch(err => {
        errorMsg(err)
        reject(err)
      })
  })
}

/**
 * postJsonService post请求
 * ps：需要注意qs.stringify
 * @param {*} url
 * @param {*} params
 * @param {*} showLoading
 */
export const postJsonService = (url = '', params = {}, showLoading = true) => {
  loading.showLoading = showLoading
  return new Promise((resolve, reject) => {
    Axios.post(url, params, {
      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
    })
      .then(res => {
        const { data } = res
        resolve(data)
      })
      .catch(err => {
        errorMsg(err)
        reject(err)
      })
  })
}

/**
 * 服务器编码
 */
export const SERVER_CODE = {
  // 响应成功
  SUCCESS: 200,
  // 响应失败
  ERROR: 500
}

/**
 * 异常错误提示
 * @param {*} err
 */
function errorMsg(err) {
  // 关闭load
  Toast.clear()
  loading.showLoading = false
  // 解析错误
  let title = '系统异常'
  if (err.message) {
    title = err.message
  }
  Toast.fail(title)
}

/**
 * 普通错误提示(请求成功，但是返回非200)
 * @param {*} res
 */
function failMsg(res) {
  if (res.infoCode !== SERVER_CODE.SUCCESS) {
    Toast.fail(res.msg)
  }
}

api-module-public.js

export default {
  hello() {
    return "hello world!";
  },
};

global-api.js

import apiModulePublic from "@/api/module/api-module-public";

export default {
  public: apiModulePublic,
};

在main.js配置全局调用

https://blog.csdn.net/block_xu/article/details/111150883
main.js

import { createApp } from "vue";
import App from "./App.vue";
import globalApi from "@/api/global-api";
const app = createApp(App);
// 配置全局变量
app.config.globalProperties.$globalApi = globalApi;
app.mount("#app");

调用方式：this.$globalApi.public.hello()

安装路由

https://blog.csdn.net/qq_31754523/article/details/108830149

npm install vue-router --save

安装状态管理vuex

这里使用了模块化 + vuex-persistedstate
首先，安装vuex和persistedstate

npm install vuex --save
npm i -S vuex-persistedstate

在这里插入图片描述

store-module-base.js

export default {
  namespaced: "StoreModuleBase",
  state: {
    welcomeMessage: "欢迎━(*｀∀´*)ノ亻!",
  },
  mutations: {
    SET_WELCOME_MESSAGE(state, param) {
      state.welcomeMessage = param;
    },
  },
  getters: {
    getWelcomeMessage(state) {
      return state.welcomeMessage;
    },
  },
  actions: {
    setWelcomeMessage({ commit }, param) {
      commit("SET_WELCOME_MESSAGE", param);
    },
  },
};

index.js
这个文件，createStore这里参考了这篇文章：https://www.freesion.com/article/70671403784/

import { createStore } from 'vuex'
import persistedState from "vuex-persistedstate";
// 模块
import StoreModuleBase from "./module/store-module-base";

/**
 * @vuex-persistedstate
 * 数据持久化，默认localStorage 参考：https://www.jianshu.com/p/c22861ec5f21
 */
export default createStore({
  plugins: [
    persistedState({
      storage: window.sessionStorage,
    }),
  ],
  modules: {
    StoreModuleBase,
  },
});

main.js
最后是main.js

import { createApp } from "vue";
import App from "./App.vue";
import globalApi from "@/api/global-api";
import router from "@/router";
import store from "@/store"
const app = createApp(App);

// 全局变量
app.config.globalProperties.$globalApi = globalApi;

// 安装组件
app.use(router).use(store);

app.mount("#app");

如果报错：Uncaught TypeError: Object(…) is not a function
可以安装一下这个：vue add vue-next
在这里插入图片描述
console.log(this.$store.state.storeModuleBase.welcomeMessage);
在这里插入图片描述

安装less

npm install less less-loader --save-dev

配置less全局变量
https://www.cnblogs.com/linbudu/p/11445137.html

TypeError: this.getOptions is not a function

https://blog.csdn.net/qq_42430948/article/details/113552673

原因： less-loader安装的版本过高
解决方案： 
npm uninstall less-loader
npm install less-loader@6.0.0

warning delete .. Replace ·· function` prettier/prettier

https://www.cnblogs.com/zan0627/p/14097046.html

在.eslintrc.js文件中配置关闭Prettier；
在rules中增加一行："prettier/prettier": "off"
重启后生效
my596257
关注
专栏目录
vue - 开始vue3项目的搭建
sunshime的博客
08-23 628
  近期开始学习vue3，所以在这里记录一下，主要使用的是脚手架的方式搭建的项目。注意点：我这里是直接在vue2.x的基础上全局安装vue3脚手架的，达到vue2.x和vue3可以同时使用的效果，所以跟官网的安装介绍会有所不同。 一、环境搭建 1、安装node环境   版本需要在8.9以上，包括8.9版本。可以使用 node -v 检查自己安装的node版本。 2、搭建脚手架 vue-cli3.0 （全局安装） npm install @vue/cli -g 可以使用 vue -V 检查是否安装成功。
vue3.x中使用cesium，vue3.x+Cesium
05-04
将Cesium集成到Vue3.x项目中，可以创建交互式的3D地图应用。以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`...
Vue3.x项目初始化/创建
Fayeni的博客
09-16 252
1.在终端输入npm install -g @vue/cli 2.创建一个文件夹/将终端路径设置成你想存储项目的文件 我在这里创建了一个专门用来学习vue的文件夹，并将终端路径指向这个文件夹 3.在终端输入vue create vue3-1，该命令会创建一个名为vue3-1的项目 4.会有几个问题，可以参考设置一下 5.路径指向vue3-1后执行命令yarn serve 6.打开http://localhost:8080/查看页面 ...
prettier 配置文件 .prettierrc
最新发布
weixin_55896343的博客
08-28 391
prettierrc 是一个配置文件，用于定义 Prettier 的代码格式化规则。这个文件通常放在项目的根目录下，以便 Prettier 在格式化代码时能够找到并使用这些规则。.prettierrc 文件是一个 JSON 文件，其中包含了各种格式化选项。
vue3.x 创建一个项目
hlvy
10-30 8519
vue create 运行以下命令来创建一个新项目： vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint ...
Vue3.0的初始化
weixin_44867717的博客
09-06 8539
Vue3.0的初始化 官方文档（ 中文版 ）：https://vue3js.cn/docs/zh/ 1、创建一个Vue3.0的项目 1、npm init vite-app vue3.0 2、cd vue3.0 3、npm install 4、npm run dev 此时，项目已经创建成功！！！！ 2、体验一下Vue3.0的新变化 1、setup() ——beforeCreate 、created 之前执行。 setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Com
Vue3初始化加载loading
RequesToGod的博客
08-17 1498
初始化loading，cv微调样式即可，原理自行研究。
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
在本文中，我们将深入探讨如何使用 Vite 初始化并运行一个 Vue 3.x 项目。首先，我们需要确保我们的计算机上已经安装了 Node.js 和 npm 或者 Yarn，因为它们是 Vite 集成开发环境（IDE）的基础。 1. **安装 Vite** ...
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
10-14
Vue CLI 3 是其第三个主要版本，引入了许多改进和优化，包括更快的项目初始化、更智能的配置以及更好的插件系统。然而，有些开发者可能因为特定需求或者习惯，还需要继续使用 Vue CLI 2.x 版本，尤其是它的 `vue ...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
Vue.js 3.x+Element Plus前端开发实战源码
08-13
源码涵盖了从项目初始化、路由配置、状态管理（可能使用 Vuex 4.x）、组件开发到页面布局的全过程，通过阅读和研究源码，开发者可以深入了解 Vue 3.x 和 Element Plus 的实际应用，提升前端开发能力。 此外，源码还...
vue3-init
cwjxyp的博客
01-04 1245
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
Vue3初始化流程解析
weixin_45446406的博客
02-29 517
vue3初始化流程掌握宝典
vue3 组件初始化流程（vue3 源码系列）
twinkle的博客
05-30 3206
学习完成响应式系统后，咋们来看看vue3组件的初始化流程 既然是看vue组件的初始化流程，咋们先来创建基本的代码，跑跑流程 （在app.vue中写入以下内容，来跑流程） import { h, ref } from "vue"; export default { name: 'App', setup() { const count = ref(0); return { count }; }, render() { return h('div.
创建第一个vue3项目
u014520406的博客
05-19 444
一、使用@vue/cli作为脚手架搭建 1.全局安装@vue/cli，安装脚本如下： npm i @vue/cli -g 或者 yarn global add @vue/cli 2.安装完成后验证版本在v4.5以上 PS D:\WorkSpace\web\workspace-vue> vue -V @vue/cli 5.0.4 或者 PS D:\WorkSpace\web\workspace-vue> vue --version @vue/cli 5.0.4 3.使用
Vue3.0 - 项目初始化的两种方式
Maggieq8324的博客
09-11 3569
目录前言环境配置初始化3.0项目clivite 前言 // 2.0 升级到 3 // 项目目录下 vue add vue-next 环境配置 先要安装node.js（自行安装） 初始化3.0项目 cli vite
Vue3学习笔记01：使用NPM方法安装Vue3
howard2005的专栏
04-16 1万+
使用cnpm安装Vue3；使用vue init创建Vue项目；使用Vite创建Vue项目
学习Vue3 第二章（配置环境）
热门推荐
qq1195566313的博客
02-02 3万+
1.安装nodejs（建议装14版本稳定） 装过的同学可以忽略 下载 | Node.js 中文网 装完之后会有一个命令叫 npm 可以在终端输入npm -v 来检查是否安装成功 2.构建vite项目 官方文档开始 {#getting-started} | Vite中文网 vite 的优势 冷服务默认的构建目标浏览器是能在 script 标签上支持原生 ESM和原生 ESM 动态导入 HMR 速度快到惊人的模块热更新（HMR） Rollup打包 它使用Rol...
vue3项目如何配置ESLint和prettier
qq_41292756的博客
08-23 306
vue3项目如何配置ESLint和prettier
Vue.js 新项目初始化指南
Vue 项目初始化指南 Vue 项目初始化是指从零开始创建一个 Vue 项目的过程。这个过程包括安装 Node.js、npm、cnpm、Vue-cli 等工具，初始化项目模板，安装项目依赖项，运行项目等步骤。 一、安装 Node.js Node....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值