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

news/2024/7/22 0:37:07/文章来源:https://blog.csdn.net/qq_23128255/article/details/139095787

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-devnpm 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.luyixian.cn/news_show_1053725.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java多线程创建方式

1. 继承Thread类 这种方式是通过创建一个新的类继承自Thread类,并覆盖run()方法来创建线程。然后通过创建这个类的对象并调用其start()方法来启动线程。 public class MyThread extends Thread { public void run() { // 在这里定义线程的执行逻辑 …

基于小波分析和机器学习(SVM,KNN,NB,MLP)的癫痫脑电图检测(MATLAB环境)

癫痫是一种由大脑神经元突发性异常放电导致的大脑功能性障碍疾病。据世界卫生组织统计,全球约有7000万人患有癫痫。癫痫患者在发病时呈现肌肉抽搐、呼吸困难、意识丧失等症状。由于癫痫发作的偶然性,患者极有可能在高空、驾驶、游泳等危险情况下发病并丧…

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现PSO-TCN-LSTM-Attention粒子群算法优化时间卷积长短期记忆神经网络融合注意力机制多变量时间序列预测预测效果基本介绍程序设…

Python条件分支与循环

大家好,当涉及到编写高效和灵活的程序时,条件分支和循环是 Python 中至关重要的概念。它们允许我们根据不同的条件执行不同的代码块,或者重复执行一组语句。条件分支和循环是测试开发工程师在日常工作中经常使用的工具,无论是编写…

kind: Telemetry

访问日志 访问日志提供了一种从单个工作负载实例的角度监控和理解行为的方法。 Istio 能够以一组可配置的格式为服务流量生成访问日志, 使操作员可以完全控制日志记录的方式、内容、时间和地点。 有关更多信息,请参阅获取 Envoy 的访问日志。 https:/…

二叉树(概念详解)

目录 树树的概念完全二叉树和满二叉树完全二叉树存储完全二叉树用数组存储堆 树 树是一种非线性的数据结构 树是根朝上的,叶子是朝下的 树是递归定义的【根N棵子树】 递归定义:大事化小,可以理解为套娃 树的子树之间是独立的,所…

conda 环境找不到 libnsl.so.1

安装prokka后运行报错 perl: error while loading shared libraries: libnsl.so.1: cannot open shared object file: No such file or directory 通过conda list 可以看到 有libsnl 2.00版本,通过修改软链接方式进行欺骗

面试题:字符串“1024“不强转怎么变成数字1024(ASCII应用)

面试题:就是面试官很秀的场合。怎么把字符串"1024"转成1024 1.ASCII码表是什么? ASCII(American Standard Code for Information Interchange)码表使用用于将字符转换成对应数字的编码规范。它由美国国家标准协会(ANSI)于1963年制定&#xf…

Llama模型家族训练奖励模型Reward Model技术及代码实战(二)从用户反馈构建比较数据集

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (三) 基于 LlaMA…

AAAI2024 基于扩散模型 多类别 工业异常检测 DiAD

前言 本文分享一个基于扩散模型的多类别异常检测框架,用于检测工业场景的缺陷检测或异常检测。 设计SG语义引导网络,在重建过程中有效保持输入图像的语义信息,解决了LDM在多类别异常检测中的语义信息丢失问题。高效重建,通过在潜…

rust语言初识

程序设计实践课上水一篇ing 来源:rust基础入门-1.初识rust-酷程网 (kucoding.com) rust作为一名新兴语言,与go又有些许不同,因为它的目标是对标系统级开发,也就是C、C这两位在编程界的位置。比如我们最常用的windows系统&#x…

【漏洞复现】用友NC registerServlet JNDI 远程代码执行漏洞(XVE-2024-10248)

0x01 产品简介 用友NC是 用友软件股份有限公司开发的一套企业级管理软件系统。它是一个基于互联网的多层应用系统,旨在为中大型企业提供全面、集成的管理解决方案。是一种商业级的企业资源规划云平台,为企业提供全面的管理解决方案,包括财务…

2024年蓝桥杯Web开发【大赛大纲】15届

一、 组别 Web应用开发分为:大学组和职业院校组。 每位选手只能申请参加其中一个组别的竞赛。各个组别单独评奖。 研究生和本科生只能报大学组。 其它高职高专院校可自行选择报任意组别。 二. 竞赛赛程 省赛时长:4小时。 决赛时长:4小…

springcloud-服务拆分与远程调用

一 微服务 1.1简单了解 SpringCloud SpringCloud是目前国内使用最广泛的微服务框架。官网地址:Spring Cloud。 SpringCloud集成了各种微服务功能组件,并基于SpringBoot实现了这些组件的自动装配,从而提供了良好的开箱即用体验&#xff1a…

FME学习之旅---day28

我们付出一些成本,时间的或者其他,最终总能收获一些什么。 教程:CSV 入门 逗号分隔值 (CSV) 是一种以 ASCII 文件格式存储结构化信息的方法,从而使其成为一个非常简单的数据库。这使其成为电子表格、数据…

Aws CodeCommit代码仓储库

1 创建IAM用户 IAM创建admin用户,增加AWSCodeCommitFullAccess权限 2 创建存储库 CodePipeline -> CodeCommit -> 存储库 创建存储库 3 SSH 1) window环境 3.1.1 上载SSH公有秘钥 生成SSH秘钥ID 3.1.2 编辑本地 ~/.ssh 目录中名为“config”的 SSH 配置文…

Java | Leetcode Java题解之第104题二叉树的最大深度

题目&#xff1a; 题解&#xff1a; class Solution {public int maxDepth(TreeNode root) {if (root null) {return 0;}Queue<TreeNode> queue new LinkedList<TreeNode>();queue.offer(root);int ans 0;while (!queue.isEmpty()) {int size queue.size();wh…

[xx点评完结]——白马点评完整代码+rabbitmq实现异步下单+资料,免费

项目所有功能已测&#xff0c;均可以跑通&#xff0c;Jmeter和RabbitMQ也都测了。 项目源码:dianpinghui: 仿黑马点评项目 资料: https://pan.baidu.com/s/1kTCn9PxgeIey90WgM4KRqA?pwdn66b 对佬有帮助可以给个star哈&#xff0c;感谢&#x1f339;&#x1f339;&#x1f3…

rk3568_semaphore

文章目录 前言1 什么是信号量1.1 信号量API函数2、信号量实验2.1 实验目的2.2函数源码2.3 运行结果图前言 本文记录rk3568开发板的信号量实验 1 什么是信号量 信号量是同步的一种方式,常常用于控制对共享资源的访问。 举个例子:停车场的停车位有100个,这100个停车位就是共…

了解区块链基础设施,共同构建安全且强大的Sui网络

区块链基础设施的范畴很广&#xff0c;但其核心是那些直接与网络互动的计算机。这些实体通常被称为节点&#xff0c;分为不同的类型&#xff0c;例如维护完整区块链副本的全节点&#xff0c;以及作为共识决定者的验证节点。除了这两种类型之外&#xff0c;还有其他类型的节点&a…