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 指令

js 复制代码
//卸载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 指令

js 复制代码
npm install -g @vue/cli
// 或者
yarn global add @vue/cli

查看所有版本号

js 复制代码
//查询3.0之前的版本
npm view vue-cli versions --json
//查询3.0之后的版本
npm view @vue/cli versions --json

安装指定版本

全局安装 npm 和 yarn 指令

js 复制代码
//安装2.9.6版本
npm install -g [email protected]
yarn global add [email protected]
//安装3.0.3版本
npm install -g @vue/[email protected]
yarn global add @vue/[email protected]
//安装4.0.5版本
npm install -g @vue/[email protected]
yarn global add @vue/[email protected]

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

js 复制代码
vue -V 或 vue --version
vue -h 或 vue --help

创建项目架子

命令

js 复制代码
// 项目名不能使用中文
vue create project-name  

启动项目

启动项目命令

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

依据package.json安装所有依赖

复制代码
npm install

使用步骤

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

2、创建项目架子

3、启动项目

项目架子目录及文件介绍

main.js

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

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

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

index.html

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中太繁杂

保存配置为下次的预设

相关推荐
uhakadotcom几秒前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道3 分钟前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树26 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro26 分钟前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手31 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209732 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737436 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了139 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王41 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄44 分钟前
echarts 实现环形渐变
前端·echarts