vue3项目搭建遇到问题及解决_vue3 contains-CSDN博客

本文链接：https://blog.csdn.net/Ty_C123/article/details/127830227

端口号配置

**vue3:**在vue.config.js文件中配置

module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:5050,//端口号配置
  }
});

vue2:

找到config文件下index.js文件
在下面的代码中进行修改，代码如下

host: ‘localhost’,
port: 5050,

搭建好项目后项目启动语句

vue2:npm run dev
vue3：npm run serve
手动选择配置如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7ge8fn6-1668311063695)(create_choice.png)]

具体配置步骤：手把手教你vue3.0项目搭建

项目采用element-plus组件库

element-ui和element-plus的区别:

Element-UI对应Element2：基本不支持手机版

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element-Plus对应Element3：组件布局考虑了手机版展示

基于 Vue 3，面向设计师和开发者的组件库

项目搭建遇到的问题

Warning: name can no longer contain capital letters

创建项目时，项目名不能大写

vue创建好后，vue项目src目录下只有component和asset文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BHZRfgxN-1668311063696)(create_problem.png)]

创建项目时选择第三个手动选择[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WuAcCcAN-1668311063696)(create.png)]

新建vue项目终端显示vue error Replace ·: with :·报错或换行报错

1.下载editorConfig插件
2.新建.editorconfig文件，并把下列代码复制上去
root = true
[*]
crlf = lf
insert_final_newline = true
3.重启软件

Component name “Login” should always be multi-word.eslintvue/multi-word-component-names
原因：新手在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。
解决:改名index-login
去掉Vue项目启动默认url地址里的#符号

vue-router路由两种显示模式：hash和history，默认是hash—— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
在index.js文件中，把createWebHashHistory换成createWebHistory，如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ry50CcGX-1668311063696)(%E5%8E%BB%E6%8E%89%E4%BA%95%E5%8F%B7.png)]

error ‘opts‘ is assigned a value but never used no-unused-vars

在rule下添加
“generator-star-spacing”: “off”,
“no-tabs”:“off”,
“no-unused-vars”:“off”,
“no-console”:“off”,
“no-irregular-whitespace”:“off”,
“no-debugger”: “off”