Vue-cli 脚手架使用/自定义脚手架/错误解决/跨域解决

最新推荐文章于 2024-04-24 16:07:39 发布
最新推荐文章于 2024-04-24 16:07:39 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109725944
版权

说明

  • vue-cli是vue官方提供的脚手架工具 command line interface client
  • 最新的版本是4,
  • 3.x版本与4.x版本变化不大, 但3.x相对于2.x的版本变化特别大
  • 在线文档: https://cli.vuejs.org/zh/

创建脚手架4/3的vue项目, 并运行

npm install -g @vue/cli

vue create vue-demo

npm run serve

创建脚手架2的vue项目

npm install -g @vue/cli-init

vue init webpack vue-demo

npm run dev

模板项目的结构

vue-cli2脚手架项目结构

gshop
	|-- build : webpack相关的配置文件夹(基本不需要修改)
	|-- config: webpack相关的配置文件夹(基本不需要修改)
		|-- index.js: 指定的后台服务的端口号和静态资源文件夹
	|-- node_modules
	|-- src : 源码文件夹
		|-- main.js: 应用入口js
	|-- static: 静态资源文件夹
	|-- .babelrc: babel的配置文件
	|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
	|-- .eslintignore: eslint检查忽略的配置
	|-- .eslintrc.js: eslint检查的配置
	|-- .gitignore: git版本管制忽略的配置
	|-- index.html: 主页面文件
	|-- package.json: 应用包配置文件 
	|-- README.md: 应用描述说明的readme文件

vue-cli3脚手架项目结构

gshop
	|-- node_modules
	|-- public 静态资源
       |-- index.html: 主页面文件,里面的no script页面不支持js的时候就显示这个
	|-- src
	   |-- main.js: 应用入口js
	|-- babel.config.js: babel的配置文件
	|-- vue.config.js: vue的配置文件
	|-- .gitignore: git版本管制忽略的配置

脚手架3相对于脚手架2的变化

  1. webpack配置
    (1) 2: 配置是暴露的, 我们可以直接在里面修改配置
    (2) 3: 配置是包装隐藏了, 需要通过脚手架扩展的vue.config.js来配置
  2. 运行启动命令
    (1) 2: npm run dev
    (2) 3: npm run serve

自定义

vue create xxx

Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?
您与默认纱线注册表的连接似乎很慢。
使用https://registry.npm.taobao.org进行更快的安装？ Y

Manually select features

在这里插入图片描述

选择插件

Check the features needed for your project
检查项目所需的功能

  • eslint:语法检查,是不是按照规定代码去写的 (airbnb是目前著名风格规范)
  • css 预处理 less/saas
  • 空格可以选择和取消,回车确认
    在这里插入图片描述

选择vue版本

Choose a version of Vue.js that you want to start the project with (Use arrow keys)
选择要使用（使用箭头键）启动项目的Vue.js版本)
在这里插入图片描述

选择css预处理器

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
选择CSS预处理器(默认情况下支持POST CSS、Autoprefixer和CSS模块)
在这里插入图片描述

格式化程序配置

Pick a linter / formatter config:
选择一个linter/格式化程序配置：
在这里插入图片描述

代码检查时机

  • lint on save 写代码的时候检查
  • commit 提交的时候检查
    在这里插入图片描述

配置文件位置

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
您更喜欢在哪里放置Babel、ESLint等的配置。？ （使用箭头键）
在这里插入图片描述

保存此配置?

Save this as a preset for future projects
将此保存为未来项目的预置
在这里插入图片描述

yarn ? npm ?

Pick the package manager to use when installing dependencies: (Use arrow keys)
在安装依赖项时选择要使用的包管理器：（使用箭头键）
在这里插入图片描述

DONE

在这里插入图片描述
在这里插入图片描述

进入文件夹,运行

在这里插入图片描述

npm run server

在这里插入图片描述

Done

在这里插入图片描述

自己第一个小练习

删除src下面所有

在这里插入图片描述

新建main.js入口文件

import Vue from 'vue';

import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

新建App.vue

<template>
  <!-- 模板页面,写页面的 -->
  <div class="app">
    <h1>hello vue cli</h1>
    <p>{{ num }}</p>
    <button @click="handle">数字加加</button>
  </div>
</template>

<script>
// 写组件配置对象
export default {
  name: " div ",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    handle() {
      this.num += 1;
    },
  },
};
</script>

<style lang='less'>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.app {
  height: 100%;
  background-color: yellowgreen;
}
</style>

npm run serve/yarn serve

package.json默认

  • 修改之后记得重启服务器
{
  "name": "myvue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

done

在这里插入图片描述

效果

在这里插入图片描述

常见报错解决

Strings must use singlequote quotes

  • 字符串必须使用单引号
    在这里插入图片描述

Missing file extension “vue” for “./App”

  • 缺少"./App"的文件扩展名"vue"
    在这里插入图片描述
  • 解决
    在这里插入图片描述

Expected parentheses around arrow function argument

  • 箭头函数参数周围的括号
    在这里插入图片描述
    在这里插入图片描述

Missing trailing comma comma-dangle

  • 末尾逗号不见了
    在这里插入图片描述

在这里插入图片描述

Missing semicolon semi

  • 缺少分号半
    在这里插入图片描述
    在这里插入图片描述

Unary operator ‘++’ used

  • 使用了一元操作符“++”
    在这里插入图片描述
    在这里插入图片描述

Newline required at end of file but not found eol-last

  • 文件末尾需要换行，但没有找到eol-last
    在这里插入图片描述

Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style

  • 期望换行符为’LF’，但发现’CRLF’换行样式
    在这里插入图片描述

关闭eslint检查 package.json

  • 关闭以后可以忽略上面的报错,不再进行检查
  • 在rules里面去做
    在这里插入图片描述

警告信息展示

  • 根据需求处理就好
    在这里插入图片描述

跨域问题解决

App.vue

<template>
  <button @click="handle">点击按钮发送请求</button>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  methods: {
    handle() {
      axios
        .get('http://localhost:3000/home')
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>

在这里插入图片描述

server

// import是ES6的语法,启动服务器需要node环境,是CommentJs语法,需要require引入
// import express from "express";

const express = require("express");

const app = express();

app.get("/home", (request, response) => {
  // cose解决跨域
//   response.set("Access-Control-Allow-Origin", "*");
  response.json({
    name: "rolls",
    color: "green",
    engine: "N73"
  });
});

// 启动服务器
app.listen(3000, "localhost", err => {
  if (err) {
    alert("服务器启动失败,请重试");
    console.log(err);
    return;
  }
  console.log("服务器启动成功了,请访问http://localhost:3000");
});

运行

Access to XMLHttpRequest at ‘http://localhost:3000/home’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在“http://localhost:3000/home”from origin“http://localhost:8080”上对XMLHttpRequest的访问已被CORS策略阻止:被请求的资源上没有“Access-Control-Allow-Origin”头。

在这里插入图片描述

解决

vuecli解决跨域官方文档

  • 在根目录下创建vue.config.js

vue.config.js 修改vue脚手架的配置文件
注意文件目录不能出错：项目根目录
当你启动脚手架时，读取这个文件配置从而修改脚手架配置

  • 方式一
 // 因为我要发访问服务器,让服务器代替我去获取数据返回给我,所以要改访问的地址
        // .get('http://localhost:8080/home')  这个是错误的
        .get('/home')

module.exports = {
  devServer: {
    /*  开启代理服务器，设置目标服务器地址为 http://localhost:3000,
      将来如果客户端发送请求到代理服务器上，代理服务器会自动将请求转发到目标服务器上 */
    proxy: "http://localhost:3000"
  }
};

成功
在这里插入图片描述

  • 方式二
// 修改请求地址
     .get('/api/home')
     .then((res) => {
       console.log(res);
     })
     .catch((err) => {
       console.log(err);
     });


module.exports = {
  devServer: {
    proxy: {
      /*
          当请求地址以 /api 开头，当前代理配置生效
          会将请求地址重写，将请求地址的/api地址替换为空，例如：
            请求地址：http://localhost:8080/api/search/users
            重写为：http://localhost:8080/search/users
          并且转发请求到 target 地址（目标服务器地址）去
            http://localhost:3000/search/users
        */
      "/api": {
        target: "http://localhost:3000",
        // 重写请求地址
        pathRewrite: { "^/api": "" }
      }
      // '/v2/api': {
      //   target: 'http://localhost:3001',
      //   // 重写请求地址
      //   pathRewrite: {'^/api' : ''}
      // }
    }
  }
};

在这里插入图片描述

简写路径

  • 需要配合jsconfig.json文件使用
// 将来处理这个文件会运行在nodejs环境,nodejs处理路径用path
const path = require("path");
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: { "^/api": "" }
      }
    }
  },
  // 当前配置会和vue配置合并,我们的生效
  configureWebpack: {
    resolve: {
      alias: {
        //配置路径别名,将来@views就代表这个目录
        /* 
          比如 import Search from "./Views/Serach"
          可以 import Search from "@views/Search"
          会把一些常用目录配置上去
        */
        // 符合页面路径
        "@views": path.resolve(__dirname, "src/views/"),
        // 公共资源 样式 图片
        "@assets": path.resolve(__dirname, "src/assets"),
        //  公共组件路径
        "@comps": path.resolve(__dirname, "src/components"),
        // 集中式管理数据路径
        "@store": path.resolve(__dirname, "src/store"),
        // 工具,js函数路径
        "@utils": path.resolve(__dirname, "src/utils")
      }
    }
  }
};

jsconfig.json

  • 路径别名没有提示,所以配置vscode配置文件就好,一定要根目录,让写路径的时候有提示
  • https://code.visualstudio.com/docs/languages/jsconfig
    在这里插入图片描述
    在这里插入图片描述
    == 这个文件一定要单独打开==也就是只要这个文件夹在vscode运行,否则嵌套太深找不到
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@views/*": ["./src/views/*"],
      "@assets/*": ["./src/assets/*"],
      "@comps/*": ["./src/components/*"],
      "@store/*": ["./src/store/*"],
      "@utils/*": ["./src/utils/*"]
    }
  },
  "exclude": ["node_modules"]
}

publicPath

  • 将来所有资源输出的路径

configureWebpack

配置参考-官方

探鱼不是鱼
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueCli4开发vue项目,并实现跨域处理
weixin_42143048的博客
10-11 287
一、创建项目 1.打开需要创建项目的文件夹 2.创建项目名称，输入名称后回车 3.选择手动创建项目 4.选择自己需要，（上下键移动键，空格键是否选中，a 键切换选择所有，i 键反转选择选项），然后回车 ( )Choose Vue version //选择vue 2.x 和 3.x 的版本 ( ) Babel // 支持高阶语法转换 ( ) Typ
vue-cli3脚手架的配置及使用教程
10-18
Vue CLI 3 提供了一个交互式的项目脚手架，允许开发者自定义项目结构和所需功能，同时也提供了默认配置，使开发者能够快速开始开发，而无需花费大量时间进行配置。 Vue CLI 3 的核心特性包括： 1. **@vue/cli**：...
vue vue-cli4跨域，配置跨域
欢迎欢迎
12-30 926
配置跨域 1.在vue- cli根目录下创建vue.config.js在devServer下配只proxy代码如下 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { target: 'http://12
编译报错 - Missing trailing comma comma-dangle or Missing semicolon semi
最新发布
若末lan的博客
04-24 559
这种错误通常出现在使用代码格式检查工具（如ESLint）时，具体是在JSON或者JavaScript对象、数组的最后一个元素后面缺少了逗号（trailing comma）。在某些编码标准中，要求在对象的最后一个属性或数组的最后一个元素后面加上逗号，以便在添加新的属性或元素时保持代码的一致性。缺少分号，找到对应的地方加上就可以了。2.在ESLint的配置文件（例如。1.点到对应的地方加上逗号;
vue cli4 axios跨域请求
06-19 1313
vue cli4 axios跨域请求 1、在项目的根目录下新建一个vue.config.js文件，内容如下： module.exports = { devServer: { proxy: { '/api': { target: 'http://10.10.17.200:8080', ws: true, changeOrigin: true, pathRewrite: { '^/api': ''
vuecli4中配置请求代理解决跨域
sun_chen_93的博客
07-29 271
元气满满，直接干！ 开发项目时，给的测试接口需要跨域，这就非常难受！ 在vuecli中，可以通过配置请求代理，解决接口跨域问题。配置过程很简单。 1. 在根目录下添加 `vue.config.js` 作为配置文件 2. 添加以下配置： module.exports = { //配置 运行和打包时的文件路径 publicPath:process.env.NODE_ENV==='production'?'./':'/', devServer:{ // 设置服务器路由（app为express
vue-cli4跨域代理设置
凌石笔记
05-11 548
根目录下创建：vue.config.js，内容写入： module.exports = { // 配置跨域代理 devServer: { port: '8080', //前端端口 proxy:'http://xxxx.xxx.xxx.xxx:8082/', // 后端api地址 } } 注意：只要以上简单的就可以，不要其他任何信息。切记！ ...
vue-cli脚手架config目录下index.js配置文件的方法
10-18
在 Vue CLI 项目中，`config` 目录下的 `index.js` 文件是项目的配置中心，它允许开发者自定义项目在开发和生产环境中的各种设置。本文将详细介绍 `index.js` 配置文件及其各个选项的作用。 1. **环境参数定义**： ...
解决vue-cli3 使用子目录部署问题
10-18
在Vue.js开发中，Vue CLI 3 是一个强大的脚手架工具，用于快速构建Vue项目。然而，在实际部署过程中，可能会遇到将应用部署到服务器子目录的情况，这就会引发一些问题。本文主要针对"vue-cli3 使用子目录部署问题...
详解vue-cli脚手架中webpack配置方法
10-18
Vue CLI 自带的配置默认使用了 Webpack，允许开发者根据需求自定义配置。下面将详细介绍 Vue CLI 脚手架中的 Webpack 配置方法。 Webpack 的核心概念包括 Entry（入口）、Output（输出）、Loaders（加载器）和 ...
vue-cli3配置与跨域处理方法
12-12
1. 如果您已安装 vue-cli2 ，请先删除当前脚手架，否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g 2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v 查看版本。如果版本过低...
CloudBeaver云数据库管理工具
08-14
1、服务器本身基于Java，Web部件则是用TypeScript和React编写； 2、能够像常规电子表格一样处理数据； 3、以模块化架构编写，并允许使用自己的插件进行扩展； 4、跨平台，可以在Linux、Windows 和 MacOS X上运行。
Vue-cli4脚手架和Axios的跨域解决方案
牧牛人Alec
08-19 899
虽然是场误会，最后我会分享自己的配置信息 问题从这开始 提示接口不能返回数据 如图： Access to XMLHttpRequest at 'http://localhost:9101/educms/bannerfront/getAllBanner' from origin 'http://localhost:3000' has been blocked by CORS policy...
解决vue-cli4跨域问题
qq_45902401的博客
10-14 412
1.新建vue.config.js module.exports={ publicPath:"./", //用法和webpack本身的output.publickPath用法一致 devServer: { proxy: { '/api': { //axios要请求的，name target: 'https://www.dmoe.cc/random.php?return=json', //target为目标地址
docker安装运行CloudBeaver并设置默认语言为中文
睡竹的博客
01-17 1057
docker安装运行CloudBeaver并设置默认语言为中文
Vuecli4 本地服务跨域问题解决
doubi6的博客
03-27 3391
在Vuecli4请求非本地接口时发生：No 'Access-Control-Allow-Origin' header is present on the requested resource.错误
cli4手脚架vue跨域问题完美解决
Primer5
07-06 495
解决经历的过程 1.在服务器端设置响应头 似乎不是很完美，有时候也会请求失败 //解决vue跨域问题 resp.addHeader("Access-Control-Allow-Origin","*"); resp.addHeader("Access-Control-Allow-Method","POST,GET"); 2.手脚架添加配置文件vue.config.js 似乎也不是很完美，有时也会请求失败 module.exports = { devServ
编译Cloudbeaver 和 连接 OpenGauss
howard_shooter的博客
09-26 3682
4、到cloudbeaver/deploy/下执行build.sh，经过漫长的编译构建，这个过程会下载很多依赖包，保证你的mvn使用国内源，我用的是 https://repo.nju.edu.cn。这是在编译一个插件 org.jkiss.dbeaver.net.ssh.sshj 时报的错，我不太懂Java，cloudbeaver的代码也不太熟，不过之前编译dbeaver时知道，dbeaver/plugins/目录下是插件，是可选的，如果解决不了这个插件的编译错误，试一试不编译这个插件，也许不会有什么影响。
如何配置vue-cli中的跨域代理
凡友福老师的博客
08-08 169
vue.config.js module.exports = { devServer: { // ... 省略 // 代理配置 proxy: { // 如果当前前端项目服务器devServer，收到一个请求，并且请求地址以/api打头,就把这个请求转发到目标服务器 // eg: // http://localhost:8080/api/newList---> http://www.xxx.com/api/newList
./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js这个文件在哪
05-31
如果文件存在，它的完整路径应该是类似于 /your-project/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js 的形式。其中 /your-project 是你的 Vue.js 项目的根目录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值