首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

一文快速上手-Vue CLI脚手架

编程知识
2024年09月12日 08:02

安装Vue CLI

(1) 全局安装Vue CLI

方式一(推荐方式):在终端安装指定版本

npm i @vue/cli@5.0.8 -g

注:目前5.0.8应该是最新的版本了。

方式二:在终端通过命令安装最新版本

npm i @vue/cli -g

(2) 升级Vue CLI到最新版本(可选)

npm update @vue/cli -g

(3) 使用vue命令创建项目

vue create 项目的名称

(4) 安装完 Vue CLI之后,可以在终端查看其版本号

vue --version

结果:

@vue/cli 5.0.8

Vue CLI新建项目

在VS Code工具中提前安装Volar插件,为vue3版本的.vue文件提供语法高亮等支持。

第一步:使用Vue CLI的vue命令新建一个名为01_vuecli_demo的Vue3版本项目。

输入命令:

vue create 01_vuecli_demo

出现如下Vue CLI脚手架默认提供的三个预设。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  • (1) Default ([Vue 3] babel, eslint):新建vue3默认项目,项目集成babel,eslint插件
  • (2) Default ([Vue 2] babel, eslint):新建vue2默认项目,项目集成babel,eslint插件
  • (3) Manually select features:新建项目,手动选择项目所需的功能,如是否需要babel和eslint插件

第二步:手动选择所需的功能。

根据需要选择相应的功能。

提示:“选中”和“取消选中”是按空格键,“上下移动”是按上下键,“确认”是按Enter键。

>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

说明:

  • babel:是否使用Babel作为JavaScript编译器,结合插件将ES6/7/8/9/10等语法转换为ES5语法。
  • TypeScript:是否使用TypeScript。
  • Progressive Web App (PWA) Support:是否支持PWA。PWA是渐进式web应用-一种无需要安装的网页应用,具有与原生应用相同的用户体验优势。
  • Router:是否默认集成路由。
  • Vuex:是否默认集成Vuex状态管理。Vuex用于在多个组件间共享数据。
  • CSS Pre-processors:是否选用CSS预处理器,即常用的Less、Scss、Stylus预处理器。
  • Linter / Formatter:是否选择Eslint对代码进行格式化限制。
  • Unit Testing:是否添加单元测试。
  • E2E Testing:是否添加E2E测试。

第三步:选择Vue.js版本。

根据需要选择vue版本,这儿示例选择vue3.x版本。

 3.x
 2.x

第四步:选择配置存放的位置。

 In dedicated config files
 In package.json

这儿选择“In dedicated config files”,意思就是将babel、eslint等配置信息统一放到各自独立的配置文件中,而不是放到package.json文件中。

第五步:是否保存为自定义预设。

Save this as a preset for future projects? (y/N)

输入y,表示保存自定义预设,也可以输入n,即不保存自定义预设。

如果保存了预设,在下次新建项目时,在第一步选择预设时,就可以看到我们保存过的预设,比如我们把前面的预设命名为“vue3-demo”,最后按"Enter"键即可。

第六步:新建成功的提示。

 $ cd 01_vuecli_demo
 $ npm run serve

vue.js 3 项目目录结构

01_vuecli_demo/  项目名称
|-- node_modules         #存放第三方依赖包(例如,执行npm i安装的依赖包)
|-- public/              #静态资源目录  
|   |-- favicon.ico      #网站图标  
|   |-- index.html       #项目的入口文件  
|-- src/                 #项目的源代码目录  
|   |-- assets/          #静态资源目录,如图片、字体等  
|   |-- components/      #可复用的 Vue 组件  
|   |-- router/          #Vue Router 的路由配置  
|   |   |-- index.js     #路由的主文件  
|   |-- store/           #Vuex 的状态管理  
|   |   |-- index.js     #状态管理的主文件  
|   |-- views/           #页面目录  
|   |   |-- About.vue    #关于页面  
|   |   |-- Home.vue     #首页  
|   |-- App.vue          #根组件  
|   |-- main.js          #项目的入口文件  
|-- .browserslistrc      #Browserslist 配置,用于 Autoprefixer 和其他工具确定目标浏览器和 Node.js 版本范围  
|-- .eslintignore        #ESLint 忽略的文件  
|-- .eslintrc.js         #ESLint 配置  
|-- .gitignore           #Git 忽略的文件  
|-- babel.config.js      #Babel 插件的配置文件 
|-- package-lock.json    #npm 依赖的锁定文件  
|-- package.json         #项目的元数据文件和 npm 脚本  
|-- README.md            #项目的说明文件 
|-- vue.config.js        #Vue CLI 配置文件,比如配置alias、devServer和configure Webpack等

项目的运行和打包

"serve": "vue-cli-service serve",
"build": "vue-cli-service build"

vue.config.js文件解析

  • 1.outputDir:用于指定打包输出的文件名,默认是dist目录。如果想修改目录名称,可以使用outputDir配置。
module.exports = {
  outputDir: 'build'
}

对于使用 Vue CLI 5.x创建的项目,vue.config.js同样支持使用defineConfig宏函数,以获得更好的代码智能提示,示例代码如下:

// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build'
})
  • 2.assetsDir:用于指定静态资源存放目录。该属性是相对于outputDir路径。
module.exports = {
  outputDir: 'build',
  assetsDir: 'static'
}

编译后,index.html资源引用情况如下:

<script defer="defer" src="/static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="/static/js/app.0af7aca5.js"></script>
<link href="/static/css/app.bf008658.css" rel="stylesheet">
  • 3.publicPath:用于指定引用资源的前缀。
// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './'
})

当进行上述相对路径配置后,在index.html代码如下:

<script defer="defer" src="static/js/chunk-vendors.abc53625.js"></script>
<script defer="defer" src="static/js/app.0af7aca5.js"></script>
<link href="static/css/app.bf008658.css" rel="stylesheet">
  • 4.alias:用于配置导包路径的别名。
    例如,当项目的目录结构比较深的时候,配置一个路径别名提高了代码的可读性和维护性。
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir);
}


// defineConfig 宏函数只支持 Vue CLI 5.x 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, // 如果选择true,那么项目引用node_modules中的包也会用Babel来编译,否则不会编译
  outputDir: 'build',
  assetsDir: 'static',
  publicPath: './',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
})

vuejs 3项目中,可以在vue.config.js文件中的chainWebpack属性上配置aliaschainWebpack 是一个函数,该函数会接收一个基于webpack-chainconfig实例,允许对webpack配置进行更细粒度的修改。

上述配置完成后,例如HelloWorld组件的引入方式可以调整为如下两种方式:

import HelloWorld from 'components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'
  • 5.devServer: 开发环境的服务配置

所有webpack-dev-server的选项都支持。注意:

  • 有些值像 host、port 和 https 可能会被命令行参数覆写。
  • 有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。

示例:

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    port: 8083,
    open: true,
    proxy: {},
  },
});
From:https://www.cnblogs.com/moqiutao/p/18409493
本文地址: http://www.shuzixingkong.net/article/1939
0评论
提交 加载更多评论
其他文章 牛逼!在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watch API回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景
牛逼!在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数 牛逼!在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数 牛逼!在Vue3.5中仅仅2分钟就能封装一个自动cancel的fetch函数
Redis 入门 - 五大基础类型及其指令学习
学习Redis基础类型:字符串、集合、有序集合、列表、哈希,每种类型有各自的特点和常用指令。掌握这些基础是熟练使用Redis的关键。更多指令需自行尝试。
Redis 入门 - 五大基础类型及其指令学习 Redis 入门 - 五大基础类型及其指令学习 Redis 入门 - 五大基础类型及其指令学习
代码整洁之道--读书笔记(7)
代码整洁之道 简介: 本书是编程大师“Bob 大叔”40余年编程生涯的心得体会的总结,讲解要成为真正专业的程序员需要具备什么样的态度,需要遵循什么样的原则,需要采取什么样的行动。作者以自己以及身边的同事走过的弯路、犯过的错误为例,意在为后来者引路,助其职业生涯迈上更高台阶。 本书适合所有程序员阅读,
代码整洁之道--读书笔记(7) 代码整洁之道--读书笔记(7)
代码整洁之道--读书笔记(8)
代码整洁之道 简介: 本书是编程大师“Bob 大叔”40余年编程生涯的心得体会的总结,讲解要成为真正专业的程序员需要具备什么样的态度,需要遵循什么样的原则,需要采取什么样的行动。作者以自己以及身边的同事走过的弯路、犯过的错误为例,意在为后来者引路,助其职业生涯迈上更高台阶。 本书适合所有程序员阅读,
代码整洁之道--读书笔记(8) 代码整洁之道--读书笔记(8) 代码整洁之道--读书笔记(8)
verilog vscode 与AI 插件
Verilog 轻量化开发环境 背景 笔者常用的开发环境 VIAVDO, 体积巨大,自带编辑器除了linting 能用,编辑器几乎不能用,仿真界面很友好,但是速度比较慢。 Sublime Text, 非常好用的编辑器,各种插件使用verilog 非常方便,可以自动补全、生成调用、linting等;
verilog vscode 与AI 插件 verilog vscode 与AI 插件 verilog vscode 与AI 插件
.NET 6.0 + WPF 使用 Prism 框架实现导航
前言 Prism 一个开源的框架,专门用于开发可扩展、模块化和可测试的企业级 XAML 应用程序,适用于 WPF(Windows Presentation Foundation)和 Xamarin Forms 等平台。 Prism 基于 MVVM(Model-View-ViewModel)设计模式,
.NET 6.0 + WPF 使用 Prism 框架实现导航 .NET 6.0 + WPF 使用 Prism 框架实现导航 .NET 6.0 + WPF 使用 Prism 框架实现导航
区块链应用与以太坊的交互
title: 区块链应用与以太坊的交互 author: ivhu date: 2024-09-11 15:52:13 categories: - 区块链 - 二层 tags: - 以太访 - L2 - 合约交互 - arbitrum description: 我们要谈的交互 首先要明确一点,以太坊是
区块链应用与以太坊的交互 区块链应用与以太坊的交互
关于 Splay 树
前置芝士 $\LARGE {关于二叉搜索树及平衡树无聊的一大串子定义}$ 二叉搜索树(BST树) 定义 二叉搜索树是一种二叉树的树形数据结构,其定义如下: 空树是二叉搜索树。 若二叉搜索树的左子树不为空,则其左子树上所有点的附加权值均小于其根节点的值。 若二叉搜索树的右子树不为空,则其右子树上所有点
关于 Splay 树 关于 Splay 树 关于 Splay 树