vue cli 自定义项目架子,vue自定义项目架子,超详细

脚手架Vue CLI基本介绍:

  1. Vue CLI 是Vue官方提供的一个全局命令工具

  2. 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】

脚手架优点:

  1. 开箱即用,零配置
  2. 内置babel等工具
  3. 标准化的webpack配置

脚手架 VueCLI相关命令

​ 若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级到vue-cli的最新版本4.0.5,则需要将旧版本卸载,然后再重新安装@vue/cli

vue-cli:vue3.0之前版本使用此名称
@vue/cli:vue3.0之后版本包括3.0版本使用此名称

卸载脚手架

npm 和 yarn 指令

//卸载3.0之前的版本
npm uninstall -g vue-cli
yarn global remove vue-cli
//卸载3.0之后的版本(可以统一使用此指令卸载)
npm uninstall -g @vue/cli
yarn global remove @vue/cli

安装脚手架

全局安装 npm 和 yarn 指令

npm install -g @vue/cli
// 或者
yarn global add @vue/cli

查看所有版本号

//查询3.0之前的版本
npm view vue-cli versions --json
//查询3.0之后的版本
npm view @vue/cli versions --json

安装指定版本

全局安装 npm 和 yarn 指令

//安装2.9.6版本
npm install -g vue-cli@2.9.6
yarn global add vue-cli@2.9.6
//安装3.0.3版本
npm install -g @vue/cli@3.0.3
yarn global add @vue/cli@3.0.3
//安装4.0.5版本
npm install -g @vue/cli@4.0.5
yarn global add @vue/cli@4.0.5

查看当前版本号和帮助信息

vue -V 或 vue --version
vue -h 或 vue --help

创建项目架子

命令

// 项目名不能使用中文
vue create project-name  

启动项目

启动项目命令

yarn serve 
// 或者 
npm run serve  // 命令中的serve不固定,找package.json查看

依据package.json安装所有依赖

npm install

使用步骤

1、第一次全局安装脚手架,后面不需要再次安装

2、创建项目架子

3、启动项目

项目架子目录及文件介绍

在这里插入图片描述

main.js

// 引入vue,相当于引入vue.js,此处引入的vue.js是缺失版本,缺失缺失模板编译器,平时不用,最后打包的时候采用
import Vue from "vue"
// 导入根组件
import App from "./App.vue"// 关闭生产提示信息
Vue.config.productionTip = false// 导入插件
import plugins1 from "@/plugins"
// 注册插件
Vue.use(plugins1, 1, 2, 3)// 创建实例
const vm = new Vue({
// render函数会被自动调用,被调用的时候,会自动传入一个参数,这个参数可以用来创建元素render: (h) => h(App),
});
vm.$mount("#app")

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({// 为true,对于低级浏览器,会把node_modules里用得到的高级语法进行babel编译// 为false 则会把node_modules里用到的高级语法原封不动的打包(无视browserslist范围),会造成在低级浏览器访问报错的情况transpileDependencies: false,// 保存时是否进行语法检查,true检查,false表示不检查lintOnSave: false,// 配置main.js入口文件pages: {index: {// 配置main.js入口文件的文件名entry: "src/main.js",},},
});

jsconfig.json

{"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {// 配置@的路径为src"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]}
}

index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- noscript b当浏览器禁用或不支持Javascript时添加提示信息 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

自定义创建项目架子

选择自定义版本

在这里插入图片描述

选择需要的配置

在这里插入图片描述

选择vue版本

在这里插入图片描述

路由模式配置

历史模式不带号,哈希(hash)模式带#号,我们现在不需要使用历史模式,历史模式需要后台去配合,所以我们选择n

在这里插入图片描述

选择预css预编译器

在这里插入图片描述

选择eslint语法规范

  • eslint是代码规范的检验工具,检验代码是否符合规范
  • 比如:const age = 18; => 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子

在这里插入图片描述

语法规则校验时机

在这里插入图片描述

配置文件存放位置

基本上单独存放,便于管理,都放在package.json中太繁杂

在这里插入图片描述

保存配置为下次的预设

在这里插入图片描述

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

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

相关文章

拼多多标准推广二阶段跑不动怎么办

拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自主设置佣金比例&#xff0c;激励推广者去帮助商家推广商品链接&#xff0c;按最终有效交易金额支付佣金&#xff0c;不成交不扣费。是商家破零、积累基础销量的重要…

mysql 按字段查询重复的数据

在 MySQL 中&#xff0c;可以使用多种方法来查询按字段重复的数据。以下是一些最常用的方法&#xff1a; 1. 使用 GROUP BY 和 HAVING 子句 SQL SELECT column_name, COUNT(*) AS count FROM table_name GROUP BY column_name HAVING count > 1; Use code with caution. …

MongoDB(四):条件操作符

条件操作 1、概述2、比较操作2.1、大于操作符-$gt2.2、大于等于操作符-$gte2.3、小于——$lt2.4、小于等于——$lte2.5、范围查询 3、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以扫描下方二维码关注我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、…

程序员的实用神器:高效开发与质量保证的秘诀

程序员的实用神器&#xff1a;高效开发与质量保证的秘诀 在软件开发的海洋中&#xff0c;程序员的实用神器如同航海中的指南针&#xff0c;帮助他们导航、加速开发、优化代码质量&#xff0c;并最终抵达成功的彼岸。这些工具覆盖了从代码编写、版本控制到测试和部署的各个环节…

数据分析的数据模型

数据分析的数据模型 前言一、优化模型1.1线性优化模型1.1.1线性优化模型定义1.1.2线性优化模型求解算法1. 1.2.1图解法1. 1.2.2. 单纯形法 1.1.3 线性优化模型的应用 1.2非线性优化模型1.2.1非线性优化模型定义1.2.2非线性优化划模型求解方法1. 2.2.1有约束非线性模型算法1.2.2…

ThinkPHP8导出Excel单元格为下拉选择框

说明 本文章是基于上一篇ThinkPHP8 导出Excel数据表格文章的完善版&#xff0c;上一篇仅导出为文本框&#xff0c;此处增加下拉框。 其他内容与上一章不变&#xff0c;此处展示不同内容。 更改 1.头部数组修改 增加type类型&#xff0c;text为文本框&#xff0c;select为下…

已解决java.util.IllegalFormatConversionException异常的正确解决方法,亲测有效!!!

已解决java.util.IllegalFormatConversionException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 示例报错代码&#xff1a; 解决思路 解决方法 检查和更正格式说明符 示例修正代码&#xff1a; 调整参数类型…

【Linux 基础 IO】文件系统

文章目录 1.初步理解文件2. fopen ( )的详解 1.初步理解文件 &#x1f427;① 打开文件&#xff1a; 本质是进程打开文件&#xff1b; &#x1f427;②文件没有被打开的时候在哪里呢&#xff1f; ----- 在磁盘中&#xff1b; &#x1f427;③进程可以打开很多个文件吗&#xff…

1329. 将矩阵按对角线排序

1329. 将矩阵按对角线排序 题目链接&#xff1a;1329. 将矩阵按对角线排序 代码如下&#xff1a; //参考&#xff1a;https://leetcode.cn/problems/sort-the-matrix-diagonally/solutions/2760094/dui-jiao-xian-pai-xu-fu-yuan-di-pai-xu-p-uts8 class Solution { public:v…

Android Ant编译环境配置(Win)

1、 载ant包: 2、设置环境变量&#xff1a; 3、检查是否设置成功及版本 4、执行命令&#xff1a; android update project -p . -n “projectname”&#xff08;例如&#xff1a;android update project --target 1 -p . -n “Couplet”&#xff09;(只输入红色部分也是可以的…

[Docker]容器的网络类型以及云计算

目录 知识梗概 1、常用命令2 2、容器的网络类型 3、云计算 4、云计算服务的几种主要模式 知识梗概 1、常用命令2 上一篇已经学了一些常用的命令&#xff0c;这里补充两个&#xff1a; 导出镜像文件&#xff1a;[rootdocker ~]# docker save -o nginx.tar nginx:laster 导…

HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码

1. 首先&#xff0c;创建一个HTML文件&#xff0c;例如index.html&#xff0c;并添加以下内容&#xff1a; html <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content&q…

美港通正规炒股暴涨近1.5倍,石墨概念港股飙升背后是这个原因

查查配5月6日讯(编辑童古)石墨概念港股早盘高开高走。截至发稿,烯石电车新材料(06128.HK)涨近148%;中国石墨(02237.HK)涨38%。 美港通证券以其专业的服务和较低的管理费用在市场中受到不少关注。该平台提供了实盘交易、止盈止损、仓位控制等功能,旨在为投资者提供更为全面的投…

Mysql8本地安装

官网&#xff1a; https://www.mysql.com/ yum安装下载&#xff1a;https://dev.mysql.com/downloads/repo/yum/ 二进制安装下载&#xff1a;https://downloads.mysql.com/archives/community/ 安装包下载 yum安装下载 打开网址&#xff08;https://dev.mysql.com/downloads/r…

2024年美国市场亚太游戏品牌数字广告洞察报告

来源&#xff1a;Sensor Tower 美国是全球最大的游戏市场之一&#xff0c;也是亚太游戏品牌出海的重要市场。2023年Q2至2024年Q1&#xff0c;美国市​场广告投放额排名前10的亚太游戏品牌&#xff0c;合计支出 超过7.5亿美元&#xff0c;环比上涨23%。 排名第一的米哈游(miHoY…

Java——this构造方法标准类

一&#xff1a;this用法 当成员变量与方法中的形参名相同时&#xff0c;采用就近原则&#xff1b; 如下&#xff0c;调用 method 时&#xff0c;两个 name 均为方法中形参的 name , 即采用就近原则&#xff1b; public class ThisDemo {public String name; /…

Linux 基础IO篇

1. C语言中的文件操作 1 #include<stdio.h>2 3 int main()4 {5 FILE* pf fopen("log.txt", "w");6 if(NULL pf)7 {8 perror("fopen");9 return 1; 10 }11 fprintf(pf, &quo…

第二届生成式AI应用创新大赛

&#x1f525; 第二届生成式AI应用创新大赛 &#x1f331; 初赛正如火如荼地进行中&#xff0c;报名截止时间是5月15日&#xff01; ⏰ ⭐ 最激动人心的总决赛将于5月30日在亚马逊上海峰会上举行&#xff0c;届时会有权威评委现场点评&#xff01; &#x1f3a4; &#x1f3…

Intellij IDEA 同一段落中同时选中修改多个相同的单词

Intellij IDEA 同一段落中同时选中修改多个相同的单词 IDEA 在实际应用中&#xff0c;有时需要同时修改多个单词的情况&#xff0c;在这里提供两种方法 第一种 在一段落中选中高亮单词&#xff0c;按 ALT J 向下选中多个想要修改的单词&#xff0c;然后[直接修改] (https://so…

GitPython 使用教程

GitPython 使用教程 GitPython 是一个用于与 Git 版本控制系统进行交互的 Python 库。它提供了简单的接口&#xff0c;让你可以通过 Python 代码执行 Git 命令和操作 Git 仓库。 1. 安装 GitPython 你可以使用 pip 在命令行中安装 GitPython&#xff1a; pip install gitpy…