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.hqwc.cn/news/670019.html

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

相关文章

Autodesk AutoCAD 2025 for Mac:强大的二维三维绘图工具

Autodesk AutoCAD 2025 for Mac是一款专为Mac用户打造的计算机辅助设计软件&#xff0c;它在继承了AutoCAD系列软件的优秀传统的基础上&#xff0c;针对Mac系统进行了全面优化&#xff0c;为用户提供了更出色的绘图和设计体验。 这款软件不仅支持用户创建和编辑复杂的二维几何图…

独家原创 | BiTCN-BiGRU-CrossAttention融合时空特征的高创新预测模型

往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 风速预测&#xff08;一&#xff09;数据集介绍和预处理-CSDN博客 风速预测&#xff08;二&#xff09;基于Pytorch的EMD-LSTM模型-CSDN博客 风速预测&#xff…

【设计模式】创建者模式之 工厂方法 抽象工厂

工厂方法模式(Factory Method) 一个特定功能&#xff0c;往往有多种实现方式&#xff0c;但是很难有某一个实现可以适用于所有情况&#xff0c;因此往往需要根据特定的场景选择不同的实现。试想&#xff1a;把选择具体实现的代码放在业务中会发生什么&#xff1f;每当我们需要…

09 华三 SSH

03 华三SSH 远程登录 1 AI解说官网 Kimi.ai - 帮你看更大的世界 (moonshot.cn) 华三交换机的SSH配置主要目的是通过SSH协议实现安全的远程登录和管理&#xff0c;以确保数据传输的安全性。以下是配置SSH的一般步骤和思路&#xff1a; 生成密钥对&#xff1a;首先需要在交换…

Sharding Capital: 为什么投资全链流动性基础设施 Entangle ?

写在前面&#xff1a;Entangle 项目的名称取自于量子纠缠(Quantum entanglement)&#xff0c;体现了项目对于构建连接、关联和互通的愿景。就像量子纠缠将不同的粒子联系在一起&#xff0c;Entangle 旨在通过其跨链流动性和合成衍生品的解决方案将不同的区块链网络连接在一起&a…

[开发|鸿蒙] 鸿蒙OS开发环境搭建(笔记,持续更新)

搭建开发环境流程&#xff1a; https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/installation_process-0000001071425528-V2 鸿蒙DevEco Studio 3.1.1 Release仅支持windows和mac系统 运行环境要求 为保证DevEco Studio正常运行&#xff0c;建议电脑配置…

炒股自动化:散户如何通过API查询资产和持仓,Python接口

券商官方的接口&#xff0c;个人账户可申请&#xff0c;入金门槛低&#xff0c;接入文档完善&#xff0c;技术支持好的&#xff0c;经过我们筛选后&#xff0c;只有一家符合&#xff0c;会编程&#xff0c;有基础&#xff0c;只是需要API接口的朋友不用看这些内容&#xff0c;不…

SpringBoot自动连接数据库的解决方案

在一次学习设计模式的时候&#xff0c;沿用一个旧的boot项目&#xff0c;想着简单&#xff0c;就把数据库给关掉了&#xff0c;结果报错 Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. 没有数据库的需…

【Unity 协程】

Unity中的协程&#xff08;Coroutine&#xff09;是一种编程结构&#xff0c;它允许你以一种看似同步的方式编写可能需要异步执行的代码。协程特别适用于需要在一定时间后执行操作&#xff0c;或者在循环执行某段代码直到某个条件满足时的场景。 协程使用IEnumerator委托来实现…

1-38 流资源类结构

一 简介 1. Java中所说的流资源--IO流 2.为什么学习留资源&#xff1f; --要操作文件中的数据 将数据写入指定的文件 将数据从指定的文件读取 3.分类 -- 四大基流 , 八大子流 (重点) 按照流向分 : 输入流 和输出流 按照操作数据资源的类型划分 字符流 (重点) Reader -- 字符…

【挑战30天首通《谷粒商城》】-【第一天】01、简介-项目介绍

文章目录 课程介绍一、 项目介绍1、项目背景A、电商模式1、B2B 模式2、B2C 模式3、C2B 模式4、C2C 模式5、O2O 模式 1.2、项目架构图1.3、项目技术 & 特色1.4、项目前置要求二、分布式基础概念(略)三、环境撘建(略) one more thing 课程介绍 1.分布式基础(全栈开发篇)2.分…

帮助命令

1.man 原意&#xff1a;manual 所在路径&#xff1a;/usr/bin/man 执行权限&#xff1a;所有用户 语法&#xff1a;man [命令或配置文件] 功能描述&#xff1a;获得帮助信息 例&#xff1a;$ man ls 查看ls命令的帮助信息 查看命令的帮助主要是看这个命令是干什么用的&am…