【vue-cli搭建vue项目的过程2.x】

news2024/10/5 16:08:41

vue-cli搭建vue项目

  • vue-cli搭建vue项目
    • 安装node
    • 安装vue-cli脚手架并创建项目
    • 安装 Ant Design Vue或element-ui(笔者使用Ant-design-vue组件，并全局引入)
    • 开发安装三方库包
      • 1、Package.json文件---引入如下package.json文件执行npm i或npm install命令即可下载如下依赖
      • 2、Vue.config.js文件
      • 3、.eslintrc.js文件---vue2老项目增加eslint配置代码规范
        • （1）安装以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略检查的文件
        • （3）package.json相关代码
        • （4） vscode的配置-----配置eslint、prettier插件（Extensions安装）；setting.json文件的配置（项目配置新建setting.json文件、或用户配置则修改vscode平台的setting）；
        • （5）启动项目
      • 4、.eslintignore忽略语法检查
    • 报错信息
      • 1、Uncaught runtime errors:通常由Vue 版本的不匹配引起的

vue-cli搭建vue项目

vue-cli文档地址

安装node

运行node -v与npm -v查看版本
国内两种方式安装第三方依赖：(1)安装yarn后使用yarn安装依赖
npm i -g yarn
npm install  xxx = yarn xxx
(2)修改镜像后用npm 安装第三方依赖
  //查看 当前镜像
npm config get registry
 // 修改 镜像文件
npm config set registry https://registry.npmmirror.com

在这里插入图片描述

安装vue-cli脚手架并创建项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

在这里插入图片描述
执行上述命令安装完脚手架后，关闭命令行，在vue项目的文件夹目录中重新打开cmd窗口新建vue项目（先查看vueCli版本后再新建，若版本不一致则卸载vuecli重新安装，笔者如下版本， 选择:镜像安装、2.x、npm）

// 查看vueCli版本
vue -V
// 新建vue项目-- 项目名称不能驼峰命名，只能中划线和小写
vue create my-app

在这里插入图片描述

安装 Ant Design Vue或element-ui(笔者使用Ant-design-vue组件，并全局引入)

引入 ant-design-vue，参考文档-快速上手
安装Ant Design Vue（笔者使用的1x.antdv.com/docs/vue/getting-started-cn）
注意 antd.css 是针对Ant Design Vue 1.x 版本

npm install ant-design-vue --save
# OR
npm i --save ant-design-vue@next
# OR
npm i --save ant-design-vue

完整引入–main.js文件 (原文件中另外引入了 Antd的js和css以及 app.use(Antd))

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
// 笔者引入antd.css 报错  Error: Can't resolve 'ant-design-vue/dist/antd.css'
//import 'ant-design-vue/dist/antd.css';
// antd.css替换为  reset.css
import 'ant-design-vue/dist/reset.css';


Vue.config.productionTip = false
Vue.use(Antd)

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

npm run serve运行若报错如下：Error: Can’t resolve ‘ant-design-vue/dist/antd.css’
解决方案：去当前项目的node_modules 下路径 ‘ant-design-vue/dist’是否真的没有 antd.css，则替换为本地存在的 reset.css;(类似 找不到文件错误就去实际地址看看是否真的没有，若没有则卸载后重装指定版本，或替换为地址中其他文件）
注意 笔者的main.js文件（笔者创建的是2.x需匹配低版本的组件库）如下：

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false
Vue.use(Antd)

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

package.json截图如下
在这里插入图片描述

安装并引入 elementUI
引入elementUI，参考文档–快速上手

npm i element-ui -S

完整引入–main.js文件 (原文件中另外引入了 elementUI的js和css以及Vue.use(ElementUI)😉

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

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

成功运行页面如下：可以开始业务场景的开发啦（引入router等其他依赖）
在这里插入图片描述

开发安装三方库包

安装指定版本库（npm install eslint@8.57.0 eslint-plugin-vue@9.25.0 babel-eslint@10.1.0 --save-dev
）；新项目开发时需要用到echarts则引入；快速搭建基本vue项目可直接使用下方的package.json替换本地同名文件，执行npm i安装package.json中的dependencies/devDependencies即可使用相关的组件库，后续也可加入其他组件库(npm install xxx --save-dev 或 npm install xxx --save两者区别有兴趣可以查查)

// eslint代码规范
npm install eslint eslint-plugin-vue babel-eslint --save-dev
npm install @babel/eslint-parser --save-dev
npm install @vue/cli-plugin-eslint --save-dev
//css 
npm install less-loader --save-dev
npm install less --save-dev

npm install echarts --save

1、Package.json文件—引入如下package.json文件执行npm i或npm install命令即可下载如下依赖

{
  "name": "xinlin-swyth-app-web2.0",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "main": ".eslintrc.js",
  "dependencies": {
    "ant-design-vue": "^1.7.8",
    "axios": "^1.7.1",
    "core-js": "^3.8.3",
    "crypto-js": "^4.2.0",
    "echarts": "^5.5.0",
    "js-cookie": "^3.0.5",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.24.5",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^9.3.0",
    "eslint-plugin-vue": "^9.26.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

2、Vue.config.js文件

const { defineConfig } = require("@vue/cli-service")
const path = require("path")
const webpack = require("webpack")

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  publicPath: "/",
  configureWebpack: (config) => {
    config.devtool = "source-map"
    Object.assign(config.resolve, {
      alias: {
        "@": resolve("src"),
      },
    })
    // 不打包md文件
    config.module.rules.push({
      test: /\.md$/i,
      loader: "file-loader",
      options: {
        emitFile: false,
      },
    })
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    })
    // Ignore all locale files of moment.js
    // config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) // 当前不支持该格式
    config.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }),
    )
    // config.plugins.push(createThemeColorReplacerPlugin())
    config.plugins.push(
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
    )
  },
})

3、.eslintrc.js文件—vue2老项目增加eslint配置代码规范

过程如下：

（1）安装以下eslint插件，并增加.eslintrc.js配置文件，.eslintignore配置忽略检查的文件

1、 eslint用于检查和标示出ECMAScript/JavaScript代码规范问题工具
2、 @babel/eslint-parser简而言之就是一个解析器，允许您使用ESLint对所有有效的Babel代码进行检查。ESLint允许使用自定义解析器，当使用此插件时，代码会被Babel解析器解析，并且生成的AST被转换成一个ESLint可以理解的符合ESTree的结构，所有的位置信息如行列也会保留，因此可以轻松的追踪错误
3、 eslint-plugin-vue Vue.js的官方ESLint插件,即使用eslint检查.vue文件的template和script
4、 eslint-config-prettier或者@vue/eslint-config-prettier [笔者未安装]
当prettier与eslint有些规则冲突时，使用prettier的规则进行覆盖
其中@vue/cli-plugin-eslint是特别为@vue/cli&create vue setups使用而设计的
5、 @vue/cli-plugin-eslint vue-cli的eslint 插件，检查和修复文件
eslintrc.js文件配置、eslintignore文件的配置
（2）安装prettier，并增加.prettierrc.js文件
代码格式化工具，通过.prettierrc.js文件进行配置代码规范 .prettierrc.js相关配置如下

//配置参照 https://prettier.io/docs/en/options.html
module.exports = {
    tabWidth: 2, // tab 使用两个空格
    endOfLine: "auto", // 保持现有的行尾
    useTabs: false, // 不使用制表符缩进，使用空格缩进
    semi: true, // 代码需要分号结尾
    singleQuote: true, // 单引号
    bracketSpacing: true, // 对象左右两侧需要空格
    jsxBracketSameLine: false, // html 关闭标签换行
    arrowParens: 'avoid', // 单参数的箭头函数参数不需要括号
    proseWrap: 'never', // markdown文档不换行
    trailingComma: 'none' // 结尾处不加逗号
  }
（3）package.json相关代码
（4） vscode的配置-----配置eslint、prettier插件（Extensions安装）；setting.json文件的配置（项目配置新建setting.json文件、或用户配置则修改vscode平台的setting）；
{
   // 用于保存时使用进行代码格式化
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    // 用于vscode右下角工具栏展示eslint标识
    "eslint.alwaysShowStatus": true,
}
（5）启动项目

由于是在老项目中增加eslint规范，所以要实现以下两点
第一，其他开发伙伴可轻松使用，需参照以下步骤：确保安装eslint、prettier插件；确保vscode的setting.json文件中的source.fixAll配置为true；删除本地node_modules；npm i重新安装依赖；
第二，因为旧代码有很多代码不规范，为了控制台清爽，也为了提高启动速度，需要将vue.config.js中的lintOnSave设置为false，即运行时不启用lint

该点–3如上转载自 文章链接

笔者.eslintrc.js文件如下：

const IS_PROD = process.env.NODE_ENV === "production"
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    // 自定义规则
    semi: ["error", "never"],
    // 分号
    camelcase: "off",
    "no-new": "off",
    "no-console": IS_PROD ? "warn" : "off",
    "no-debugger": IS_PROD ? "error" : "off",
    "no-unreachable": IS_PROD ? "error" : "warn",
    // 提前return
    "prefer-promise-reject-errors": "off",
    "standard/no-callback-literal": "off",
    "no-unused-vars": IS_PROD ? "error" : "warn",
    "comma-dangle": ["error", "only-multiline"],
    // 末尾逗号
    "space-before-function-paren": [
      "error",
      {
        anonymous: "ignore",
        named: "never",
        asyncArrow: "always", // async箭头函数
      },
    ],
    "generator-star-spacing": "off",
    "no-tabs": "off",
    "no-irregular-whitespace": "off",
    // "vue/no-template-key": "off",
    // "vue/no-v-for-template-key": "off",
    // "vue/no-unused-components": "off",
    // "vue/no-unused-vars": "off",
    // "vue/require-v-for-key": "off",
    // "vue/valid-v-for": "off",
    "vue/multi-word-component-names": ["warn"],
    eqeqeq: "warn",
    quotes: "off",
  },
}

4、.eslintignore忽略语法检查

/* .eslintignore内容,根据实际情况修改:# 忽略xxx目录下文件的语法检查 */
src/assets
src/icons
src/tools
public
dist
node_modules
*.md
*.html

报错信息

1、Uncaught runtime errors:通常由Vue 版本的不匹配引起的

ERROR (0 , vue__WEBPACK_IMPORTED_MODULE_2__.createVNode) is not a function
TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_2__.createVNode) is not a function
at eval (webpack-internal:///./node_modules/ant-design-vue/es/empty/index.js:36:73)

在这里插入图片描述
解决方法： 降低 Ant Design Vue 的版本[新安装的版本为4.2.1，降为"ant-design-vue": “^1.7.8”，推荐卸载当前版本后再安装指定版本]，降低版本后，完整引入ant-design-vue组件时需要修改为安装路径下有的css–import ‘ant-design-vue/dist/antd.css’;
如下
“dependencies”: {
“ant-design-vue”: “^1.7.8”,
“core-js”: “^3.8.3”,
“vue”: “^2.6.14”
}
PS: 通常情况下，你不需要先卸载当前版本的 Ant Design Vue，你可以直接安装指定版本，npm 会处理版本的切换和依赖关系。
但有时为了避免潜在的问题，你也可以选择先卸载当前版本再安装指定版本。这样做并不会有什么坏处，而且可以确保干净地切换到目标版本。你可以使用以下命令来卸载当前版本：
npm uninstall ant-design-vue
再安装指定版本：npm install ant-design-vue@1.7.8 --save

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1698170.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Dou音滑块日志分析

Dou音滑块日志分析

记得加入我们的学习群：961566389 点击链接加入群聊：[https://h5.qun.qq.com/s/62P0xwrCNO](https://h5.qun.qq.com/s/62P0xwrCNO) 1.插桩-打印日志 获取背景和滑块的图片的接口一看没啥参数需要逆向的 验证的接口body参数需要进行逆向，直接…
阅读更多...
Qt 界面上控件自适应窗体大小 - 随窗体缩放

Qt 界面上控件自适应窗体大小 - 随窗体缩放

Qt 界面上控件自适应窗体大小 - 随窗体缩放 引言一、在Qt Designer上设置二、参数详解三、参考链接 引言 添加布局，设置控件的minimumSize、maximumSize和sizePolicy可以使其跟随窗体进行自适应缩放 - 如上图所示。 一、在Qt Designer上设置 在代码中设置效果一致…
阅读更多...
Slash后台管理系统代码阅读笔记 如何实现环形统计图表卡片？

Slash后台管理系统代码阅读笔记 如何实现环形统计图表卡片？

目前&#xff0c;工作台界面的上半部分已经基本梳理完毕了。 接下来&#xff0c;我们看看这个环形图卡片是怎么实现的&#xff1f; 具体代码如下&#xff1a; {/*图表卡片*/} <Row gutter{[16, 16]} className"mt-4" justify"center">{/*环形图表…
阅读更多...
Android BACK键和HOME键应用差异详解

Android BACK键和HOME键应用差异详解

文章目录 1、应用层分析1.1 BACK键功能实现 1.2 HOME键功能实现 1.3 BACK键与HOME键的区别 2、系统层分析2.1 BACK键的处理2.2 HOME键的处理2.3 代码分析BACK键HOME键BACK键的系统代码分析HOME键的系统代码分析BACK键HOME键 3、优缺点分析3.1 BACK键3.2 HOME键 4、项目中的使用…
阅读更多...
ISCC2024个人挑战赛WP-迷失之门

ISCC2024个人挑战赛WP-迷失之门

&#xff08;非官方解&#xff0c;以下内容均互联网收集的信息和个人思路&#xff0c;仅供学习参考&#xff09; 迷失之门 方法一&#xff1a; IDA看一下 check函数逻辑 进入到check2函数 R键将ascii码转字符&#xff0c;写出逆向脚本 #include <stdio.h> #include &l…
阅读更多...
【CCIE | 网络模拟器】部署 EVE-NG

【CCIE | 网络模拟器】部署 EVE-NG

目录 1. 环境准备2. 下载 EVE-NG 镜像3. 安装 EVE-NG 虚拟机3.1 创建 eve-ng 虚拟机3.2 选择存储3.3 定义虚拟机计算资源&#xff08;1&#xff09;开启CPU虚拟化功能&#xff08;2&#xff09;精简置备磁盘 3.4 检查虚拟机设置 4. 安装系统4.1 选择系统语言4.2 选择系统键盘类…
阅读更多...
dubbo复习：（9）配置中心的大坑，并不能像spring cloud那样直接从配置中心读取自定义的配置

dubbo复习：（9）配置中心的大坑，并不能像spring cloud那样直接从配置中心读取自定义的配置

配置中心只是为 Dubbo 配置提供管理使用的&#xff08;比如配置服务超时时间等)。不要尝试通过Value类似的方式从dubbo 配置中心(比如nacos、zookeeper、Apollo)来获取数据 https://github.com/apache/dubbo/issues/11200可以在application.yml中主要写注册中心的配置&#xf…
阅读更多...
OpenStack平台Glance管理

OpenStack平台Glance管理

1. 规划节点 使用OpenStack平台节点规划。 IP主机名节点192.168.100.10controller控制节点192.168.100.20compute计算节点 2. 基础准备 使用实战案例-部署的OpenStack平台。 IP 主机名 节点 192.168.100.10 controller 控制节点 192.168.100.20 copute 计算节点 02 案例分…
阅读更多...
卡特兰数-

卡特兰数-

是组合数学中一种常出现于各种计数问题中的数列。 一、简单介绍 卡特兰数是一个数列&#xff0c;其前几项为&#xff08;从第零项开始&#xff09; : 1, 1, 2, 5, 14, 42, 132, 429, 1430, 4862, 16796, 58786, 208012, 742900, 2674440, 9694845, 35357670, 129644790, 47763…
阅读更多...
2024/5/26周报

2024/5/26周报

文章目录 摘要Abstract文献阅读题目创新点方法网络架构LSTM 实验过程Data acquisitionData preprocessingAlgorithm parameter settingsModels evaluation 实验结果 深度学习ARIMA一、ARIMA模型的基本思想二、ARIMA模型的数学表达式三、差分过程 总结 摘要 本周阅读了一篇基于…
阅读更多...
多线程（C++11）

多线程（C++11）

多线程&#xff08;C&#xff09; 文章目录 多线程&#xff08;C&#xff09;前言一、std::thread类1.线程的创建1.1构造函数1.2代码演示 2.公共成员函数2.1 get_id()2.2 join()2.3 detach()2.4 joinable()2.5 operator 3.静态函数4.类的成员函数作为子线程的任务函数 二、call…
阅读更多...
牛客网刷题 | BC98 线段图案

牛客网刷题 | BC98 线段图案

目前主要分为三个专栏&#xff0c;后续还会添加&#xff1a; 专栏如下&#xff1a; C语言刷题解析 C语言系列文章 我的成长经历 感谢阅读&#xff01; 初来乍到&#xff0c;如有错误请指出&#xff0c;感谢&#xff01; 描述 KiKi学习了循环&am…
阅读更多...
网络应用层之(1)DHCPv6协议

网络应用层之(1)DHCPv6协议

网络应用层之(1)DHCPv6协议 Author: Once Day Date: 2024年5月26日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 通信网络技术_Once-Day的博客-C…
阅读更多...
20240526怎样将windows的屏幕复制到第二屏

20240526怎样将windows的屏幕复制到第二屏

百度&#xff1a;WIN10 第二显示器 COPY https://zhidao.baidu.com/question/761454546683111004.html 20240526怎样将windows的屏幕复制到第二屏  我来答 分享 举报 2个回答#热议# 海关有哪些禁运商品&#xff1f;查到后怎么办&#xff1f; 华硕服务 2022-07-05 百度认证:…
阅读更多...
【找出第 K 大的异或坐标值】python

【找出第 K 大的异或坐标值】python

4层循环暴力超时 class Solution:def kthLargestValue(self, matrix: List[List[int]], k: int) -> int:nums[]for a in range(len(matrix)):for b in range(len(matrix[0])):num0for i in range(a1):for j in range(b1):num^matrix[i][j]nums.append(num)nums.sort()retu…
阅读更多...
python web自动化(分布式测试Grid)

python web自动化(分布式测试Grid)

Grid介绍 Selenium Grid 是 Selenium 提供的⼀个⼯具&#xff0c;⽤于⽀持在多台计算机上并⾏运⾏测试。 它允许将测试分发到不同的机器和浏览器组合上&#xff0c;同时收集结果。 1.并⾏执⾏测试⽤例&#xff1a;在不同的机器上并⾏执⾏测试⽤例&#xff0c;从⽽加速整个测试过…
阅读更多...
安卓自定义控件（视图、改造控件、通知Notification、界面绘制）

安卓自定义控件（视图、改造控件、通知Notification、界面绘制）

视图的构建过程 此节介绍一个视图的构建过程&#xff0c;包括&#xff1a;如何编写视图的构造方法&#xff0c;4个构造方法之间有什么区别&#xff1b;如何测量实体的实际尺寸&#xff0c;包含文本、图像、线性视图的测量方法&#xff1b;如何利用画笔绘制视图的界面&#xff…
阅读更多...
千帆【API接入】自定义组件简明教程

千帆【API接入】自定义组件简明教程

千帆【API接入】自定义组件简明教程 大家好&#xff0c;我是 JavaRoom&#xff0c;今天来给大家做一个自定义API接入来是心啊遣返组件创建案例简明教学。 1.准备工作 1.1 一个不欠费的千帆账号 财务总览地址&#xff1a;https://console.bce.baidu.com/billing/#/account/i…
阅读更多...
ionic关于@angular版本报错解决方案（有效）

ionic关于@angular版本报错解决方案（有效）

最近学校要求使用ionicangular学习&#xff0c;但是出现下面问题&#xff0c;这里我就分享一个我亲测有效的解决方案&#xff0c;提供学习&#xff08;在VScode中&#xff09; npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resol…
阅读更多...
【调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cpolar】

【调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cpolar】

调试笔记-系列文章目录 调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cpolar 文章目录 调试笔记-系列文章目录调试笔记-20240526-Linux-在 OpenWrt-23.05 发行版上安装 cpolar 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调试步骤…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023