技术标签: # vue3教程(从0开始起飞...) 前端框架 vite 前端 vue.js create-vue
目录
前提条件
- 熟悉命令行
- 已安装 16.0 或更高版本的 Node.js
同时按window+R键,输入cmd,打开命令提示符窗口
输入: node –v (查看本机安装的node版本)
输入: npm –v (查看本机安装的npm版本)
如果提示没有安装node或Node.js 版本 较低,请升级你的 Node 版本。
详细教程可参阅下面链接文章:
同时按window+R键,输入cmd,打开命令提示符窗口
进入你准备搭建vue3 项目的相应目录,例如本例目录地址:C:\00program\vue\vuelearn
- 输入:npm init vue@latest
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vueproject1
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in C:\00program\vue\vuelearn\vueproject1...
我们依次输入问题的答案,帮助创建项目:
- Project name:------》项目名称,默认值:vue-project,可输入想要的项目名称,此处我写的是:vueproject1。
- Add TypeScript? ------》是否加入TypeScript组件?默认值:No。
- Add JSX Support? ------》是否加入JSX支持?默认值:No。
- Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
- Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理?默认值:No。
- Add Vitest for Unit testing? ------》是否添加Vitest来进行单元测试?默认值:No。
- Add an End-to-End Testing Solution?------》是否添加端到端测试?默认值No。
- Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查?默认值:No。
如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。
脚手架工程项目在指定位置被创建好。
在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
Done. Now run:
cd vueproject1
npm install
npm run dev
cd进入vueproject1目录后,依次输入以下命令,
- npm install
- npm run dev
vite服务器启动,显示了项目地址,如下图:
我们在浏览器打开 http://localhost:5173/
显示页面如下图:
现在已经可以运行起一个 Vue 项目!
请注意,生成的项目中的示例组件使用的是组合式 API 和 <script setup>,而非选项式 API。
当你准备将应用发布到生产环境时,请运行:
- npm run build
此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。
Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
一个开发服务器,它基于原生 ES 模块,提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。
Vite 浏 览 器 支 持 | |||
默认情况下,Vite 的目标是能够 支持原生 ESM script 标签、支持原生 ESM 动态导入 和 import.meta 的浏览器: | |||
Chrome | Firefox | Safari | Edge |
>=87 | >=78 | >=14 | >=88 |
目前Vite支持的模板预设如下: |
||||||
JavaScript | vanilla | vue | react | preact | svelte | lit |
TypeScript | vanilla-ts | vue-ts | react-ts | preact-ts | svelte-ts | lit-ts |
本文介绍如何在本地搭建 Vue 单页应用。
创建的项目将使用基于 Vite 的构建设置,并允许我们使用 Vue 的单文件组件 (SFC)。
确保你安装了最新版本的 Node.js,
然后在命令行中运行以下命令
兼容性注意
Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
如果你不知道你的node.js的版本是多少,请按照上文所述步骤检测升级node
构建一个 Vite + Vue 项目,npm版本不同时,命令也有所不同:
输入命令:
npm 6.x
- npm create vite@latest my-vue-app --template vue
n pm 7+, extra double-dash is needed:
- npm create vite@latest my-vue-app -- --template vue
y arn
- yarn create vite my-vue-app --template vue
pnpm
- pnpm create vite my-vue-app --template vue
进入你准备搭建 Vite + Vue 项目的相应目录,例如本例目录地址:C:\00program\vue\vuelearn
- 输入命令:npm create vite@latest vueviteproject1 -- --vue
C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
? Select a framework: » - Use arrow-keys. Return to submit.
> Vanilla
Vue
React
Preact
Lit
Svelte
Others
Select a framework: »------》 选择一个框架
我们选择Vue,回车,显示下一项选项:
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
Customize with create-vue
Nuxt
选择一个编程语言: » - 使用箭头键。返回提交。
我们选择TypeScript,回车,显示下一项如图:
C:\00program\vue\vuelearn>npm create vite@latest vueviteproject1 -- --vue
√ Select a framework: » Vue
√ Select a variant: » TypeScript
Scaffolding project in C:\00program\vue\vuelearn\vueviteproject1...
Done. Now run:
cd vueviteproject1
npm install
npm run dev
脚手架项目构建完成 ,需要进入项目目录,输入以下两个命令:
- npm install
- npm run dev
- npm run dev
VITE v4.2.0 ready in 294 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Shortcuts快捷方式
- press r to restart the server ------》按 R 重新启动服务器
- press u to show server url ------》按你显示服务器网址
- press o to open in browser ------》按 O 在浏览器中打开
- press c to clear console ------》按 C 清除控制台
- press q to quit ------》按 Q 退出
在本地用浏览器打开:http://localhost:5173
就可以看到刚才创建的基于Vite + Vue.js的项目欢迎页面,如图所示。
同时按window+R键,输入cmd,打开命令提示符窗口,进入 Vue 项目所在目录,例如:
C:\00program\vue\vuelearn\vueviteproject1
- 输入vue ui
打开Vue 项目管理器界面(vue ui会自动打开其网址:http://localhost:8000/project/select)
vueviteproject1项目(基于Vite + Vue项目)│
│
├── .vscode 目录。
│ ├── v
│ ├── v
│ └── v
│
├── node_modules 目录 (vue 项目的文件依赖存放在这个文件夹。)
│ ├── 所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。
│ ├── v
│ └── v
│
│
├── public 目录:存放项目公共资源。如网站LOGO等。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时,public内容会直接放到dist文件夹内plugins插件资源;
│ ├── v
│ ├── v
│ └── v
│
│
├── src 目录 :存放 vue 项目的源代码。其下的各个文件(文件夹)分别为:
│ ├── assets 目录 :资源文件,存放 css,图片等资源。
│ ├── component 目录 :组件文件夹,存放 vue 的公共组件(核心)
│ │ (注册于全局,在整个项目中通过关键词便可直接输出)。
│ │
│ ├── router 目录 :用来存放 index.js,用来配置路由,定义各个页面对应的URL。
│ ├── store 目录 :组件文件夹,存放 vue 的公共组件
│ ├── views 目录:放主体页面,vue 文件是可以用来充当路由 view 的。
│ ├── tool:用来存放工具类 js,
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ (如api.js,http.js 是对 http 方法和 api 方法的封装)。
│ ├── main.js:是项目的入口文件,初始化 vue 实例,并引入所需要的插件。
│ ├── app.vue:是项目的主组件,所有页面都是在该组件下进行切换的。
│ ├──
│ └── v
│
│
├── package.json 存放项目的依赖配置
├── .gitignore。
├── tsconfig.json
├── tsconfig.node.json
├──index.html
└──vite.config.ts
Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ,这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外,index.html 中的 URL 将被自动转换,因此不再需要 %PUBLIC_URL% 占位符了。
与静态 HTTP 服务器类似,Vite 也有 “根目录” 的概念,即服务文件的位置,在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析,因此你可以像在普通的静态文件服务器上一样编写代码(并且功能更强大!)。Vite 还能够处理依赖关系,解析处于根目录外的文件位置,这使得它即使在基于 monorepo 的方案中也十分有用。
Vite 也支持多个 .html 作入口点的 多页面应用模式。
转载地址:https://huaweicloud.csdn.net/638ee192dacf622b8df8d725.html
1.配置和pinia,router,axios,ref,reactive引入等等
2.配置代理
3.配置.ts,.vue,.tsx等等文件别名
4.配置antdV按需加载
5.配置antdV主题色+全局引入less+全局颜色变量
6.配置vue使用tsx写法
7.配置测试环境保留打印
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' //tsx插件引入
import AutoImport from 'unplugin-auto-import/vite' //自动引入ref,reactive等等等
// 配置antd-v按需加载
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// import path from 'path';
import { resolve, join } from 'path'
import { wrapperEnv } from './build/utils'
// defineConfig 工具函数,这样不用 jsdoc 注解也可以获取类型提示
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
console.log(command, mode, '===')
const root = process.cwd()
const env = loadEnv(mode, root) // 环境变量对象
console.log('环境变量------', env)
console.log('文件路径( process.cwd())------', root)
console.log('文件路径(dirname)------', __dirname + '/src')
const { VITE_DROP_CONSOLE } = wrapperEnv(env)
// // dev 独有配置
return {
root, //项目根目录(index.html 文件所在的位置) 默认: process.cwd()
base: '/', // 开发或生产环境服务的公共基础路径:默认'/' 1、绝对 URL 路径名: /foo/; 2、完整的 URL: https://foo.com/; 3、空字符串或 ./(用于开发环境)
publicDir: resolve(__dirname, './dist'), //默认'public' 作为静态资源服务的文件夹 (打包public文件夹会没有,里面得东西会直接编译在dist文件下)
assetsInclude: resolve(__dirname, './src/assets'), // 静态资源处理
// ******插件配置******
plugins: [
vue(),
vueJsx(),
AutoImport({
imports: [
'vue',
'vue-router',
'pinia',
{
axios: [
['default', 'axios'] // import { default as axios } from 'axios',
]
}
],
dts: 'types/auto-import.d.ts' //生成全局引入的文件
}),
Components({
resolvers: [
AntDesignVueResolver({
importStyle: 'less' //修改antdv主题色
})
]
})
], //配置插件
// ******开发服务器配置******
server: {
https: true, //(使用https)启用 TLS + HTTP/2。注意:当 server.proxy 选项 也被使用时,将会仅使用 TLS
host: true, // 监听所有地址
port: 8080, //指定开发服务器端口:默认3000
open: true, //启动时自动在浏览器中打开
cors: false, //为开发服务器配置 CORS
proxy: {
//配置自定义代理规则
// 字符串简写写法
'/jpi': 'http://192.168.1.97:4567',
'/api': {
target: 'http://192.168.1.97:108',
changeOrigin: true, //是否跨域
rewrite: path => path.replace(/^\/api/, '')
}
}
// hmr: {
// overlay: false
// }
},
// ******项目构建配置******
build: {
target: 'modules', //设置最终构建的浏览器兼容目标 //es2015(编译成es5) | modules
outDir: 'dist', // 构建得包名 默认:dist
assetsDir: 'assets', // 静态资源得存放路径文件名 assets
sourcemap: false, //构建后是否生成 source map 文件
brotliSize: false, // 启用/禁用 brotli 压缩大小报告。 禁用该功能可能会提高大型项目的构建性能
minify: 'esbuild', // 项目压缩 :boolean | 'terser' | 'esbuild'
chunkSizeWarningLimit: 1000, //chunk 大小警告的限制(以 kbs 为单位)默认:500
cssTarget: 'chrome61' //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式 (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
},
// ******resolver配置******
resolve: {
alias: {
// 别名配置
// 键必须以斜线开始和结束
'@': resolve(__dirname, 'src'),
components: resolve(__dirname, './src/components'),
assets: resolve(__dirname, './src/assets'),
'#': resolve(__dirname, 'types'),
build: resolve(__dirname, 'build')
}
},
// ******打印+debugger清除配置******
// 测试环境保留打印
esbuild: {
pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : []
},
css: {
// 全局变量+全局引入less+配置antdv主题色
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 全局变量使用:@primary-color
modifyVars: {
'primary-color': '#1890ff', // 全局主色
'link-color': ' #1890ff', // 链接色
'success-color': ' #52c41a', // 成功色
'warning-color': ' #faad14', // 警告色
'error-color': ' #f5222d', // 错误色
'font-size-base': ' 14px', // 主字号
'heading-color': ' rgba(0, 0, 0, 0.85)', // 标题色
'text-color': ' rgba(0, 0, 0, 0.65)', // 主文本色
'text-color-secondary': ' rgba(0, 0, 0, 0.45)', // 次文本色
'disabled-color': ' rgba(0, 0, 0, 0.25)', // 失效色
'border-radius-base': ' 2px', // 组件/浮层圆角
'border-color-base': ' #d9d9d9', // 边框色
'box-shadow-base': ' 0 2px 8px rgba(0, 0, 0, 0.15)' // 浮层阴影
}
}
}
}
}
})
创建基于Webpack的Vue.js项目 | |
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue) | |
vue3 项目创建(UI图形化界面方式,可视化操作Vue项目,vue ui) | |
推荐阅读:
30 | Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细) | |
29 | | |
28 | | |
27 | | |
26 | | |
25 | | |
24 | | |
23 | | |
22 | | |
21 | | |
20 | | |
19 | | |
18 | | |
17 | | |
16 | | |
15 | | |
14 | | |
13 | | |
12 | | |
11 | | 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) |
10 | | |
9 | | |
8 | | |
7 | | 2023年3月TIOBE 指数头条:编程语言 Go 进入 TIOBE 指数前 10 名,多家权威机构____编程语言排行榜__薪酬状 |
6 | | |
5 | | |
4 | | |
3 | | |
2 | | |
1 | |
文章浏览阅读1.6w次,点赞7次,收藏52次。在串行通信中,数据在1位宽的单条线路上进行传输,一个字节的数据要分为8次,由低位到高位按顺序一位一位的进行传送。串口收发数据的单位:字节 (Byte) '', 1Byte = 8 bits , 串口收发数据格式一般为 :1bit 起始位(一般为0) + 8bits 数据位(一字节) +1bit 校验位(可有可无) + 1bit结束位(一般为1)奇校验是指每帧数据中,包括数据位和奇偶校验位的全部9个位中1的个数必须为奇数; 偶校验是指每帧数据中,包括数据位和奇偶校验位的全部..._串口数据格式
文章浏览阅读1.2w次。基于非对称算法的RSA Key主要有两个用途,数字签名和验证(私钥签名,公钥验证),以及非对称加解密(公钥加密,私钥解密)。本文提供一个基于OpenSSL和Python进行非对称加解密的例子。1. OpenSSL实现非对称加解密1.1 生成私钥,并导出公钥生成2048 bit的PEM格式的RSA Key:Key.pem$ openssl genrsa -out Key...._python openssh id_rsa转为rsa
文章浏览阅读1.2w次,点赞25次,收藏140次。 题目是老师布置的一道作业题,要求用C或C++完成,但不能用VTK/Opencv等软件包,经过很多摸索之后实现了该功能,后续可能还有其他功能要实现,所以先写一篇博客记录下,一方面是方便自己以后使用,另一方面是给其他人做个参考,少走一些弯路。说不定以后学弟学妹们就看到了这篇博客(猜猜我是哪个学校的?)一、作业要求要求读取一幅位图图像,即BMP位图,并显示该图像在对话框内。鼠标点击该..._手动输入坐标值 自动显示图像灰度值 软件
文章浏览阅读5.1k次,点赞2次,收藏6次。在Android 7.0以后,系统加了限制,访问私有so库有了限制,报错为下面的: PID: 3918 java.lang.UnsatisfiedLinkError: dlopen failed: library "libandroid_runtime.so" not found at java.lang.Runtime.loadLibrary0(Runtime.ja..._libandroid_runtime.so
文章浏览阅读352次。2019独角兽企业重金招聘Python工程师标准>>> ..._美团知识图谱
文章浏览阅读105次。2019年3月30至31日,我校成功组织了第54次全国计算机等级考试。本次考试,我校共安排18个标准化考场,8个批次,共计6894名考生参加考试。考试期间,副校长徐小立、教务处处长瞿述、信息学院书记甘向阳、纪委副书记曹斯曼、南湖学院副院长李革新、岳阳市教体局招考办等相关单位负责同志对考试工作进行全程巡视、指导,考试过程中考场秩序及考风良好。(教务处处长瞿述、副处长刘隆华、信息学院副院长周小强、纪委..._全国计算机二级开信号屏蔽仪吗
文章浏览阅读56次。每个类,我们的编译器都知道数据成员的偏移,函数代码段的位置,运行的时候,我们的C#系统会为我们每个类----》描述实例(数据内存);Type类型,Type实例,属于System名字空间;Type:一些类型的描述信息int type;//类型//这个字段的内存大小;int offset;//在内存对象中的内存偏移int type;//静态的还是,普通的;int offset;//函数代码指令的地址;l/当前类的实例的内存大小;//当前这个类的数据成员;
文章浏览阅读10w+次,点赞157次,收藏720次。电流流向: NPN PNP它最主要的功能是电流 放大和开关作用。Emitter,Base,CollectorNPN管,集电极电流IC和基极电流IB流入管子。发射极电流IE流出管子。且IC+IB=IE。 Icb+Ibe=Ice 即βIbe+Ibe=IcePNP管,集电极电流IC和基极电流IB流出管子。发射极电流IE流入管子。同样IC+IB=IE。无论管子..._pnp型3极管
文章浏览阅读1.8k次。在几年前,并没有真正意义上的前端开发。随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发。如今,我们可以看到越来越多的公司在招聘前端开发岗位。前端开发并不容易,除了掌握基本的 HTML、CSS 和Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计,它不仅_前端是否有类似liteflow的框架
文章浏览阅读969次。其次,当时的电子技术工艺水平比较落后,主要的元件是电子管或晶体管,利用它们制作的神经网络体积庞大,价格昂贵,要制作在规模上与真实的神经网络相似是完全不可能的;(3)非线性映射能力当对系统对于设计人员来说,很透彻或者很清楚时,则一般利用数值分析,偏微分方程等数学工具建立精确的数学模型,但当对系统很复杂,或者系统未知,系统信息量很少时,建立精确的数学模型很困难时,神经网络的非线性映射能力则表现出优势,因为它不需要对系统进行透彻的了解,但是同时能达到输入与输出的映射关系,这就大大简化设计的难度。..._w.s.mcculloch
文章浏览阅读325次。2020-8-9 mark工具推荐推荐一款轻量简洁的Markdown编辑器——Typora,好用到爆。之前用的是Atom+插件(markdown-preview-enhanced, markdown-writer),也挺不错的,但是就是功能太多,界面不够简洁。目前的使用方式是Typora + Atom + CSDN结合使用:Typora用来打字和产出Atom结合插件进行文件的管理CSDN将写好的文章或者笔记进行发布接下来说说,Typora的几点好处。支持Markdown的所有语._typora笔记成果
文章浏览阅读7.9k次。坚果SmartisanYQ601(32G存储,2G运行内存) 安卓5.1.1 获取Root权限本来只是想获取root权限,删除系统的一些无用的东西的。后来折腾了很久,没能获得 root 权限,刚开始的时候使用了各种 获取root的软件来试,都没有拿到 root,后面试着刷 recovery,但是刷recovery又需要有root权限才能刷,所以就没办法刷入 recov_坚果投影仪root