Vue3学习笔记---创建Vue3.0工程

LinMeng
• 阅读 75

创建方式分为两种:

1.使用vue-cli创建

官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

 vue --version
// 安装或升级你的@vue/cli
 npm install -g @vue/cli
// 创建
 vue create vue_test
// 启动
 cd vue_test
 npm run serve

2.使用vite创建

官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网:https://vitejs.cn/

* 什么是vite?------新一代前端构建工具
* 优势如下:

  1. 开发环境中,无需打包操作,可快速的冷启动
  2. 轻量快速的热重载(HMR)
  3. 真正的按需编译,不再等待整个应用编译完成
  • 传统构建与vite构建对比图
  • 传统构建 Vue3学习笔记---创建Vue3.0工程 vite构建 Vue3学习笔记---创建Vue3.0工程 创建工程如下:
    npm init vite-app <project-name>
    // 进入工程目录
    cd <project-name>
    //安装依赖
    npm install
    //运行
    npm run dev 
点赞
收藏
评论区
推荐文章
放学路上 放学路上
1年前
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Jacquelyn38 Jacquelyn38
1年前
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
菜鸟阿都 菜鸟阿都
1年前
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
LinMeng LinMeng
1年前
vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/cssloaderoptions // 这里只列一部分,具体配置参考文档 module.exports { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI
Easter79 Easter79
1年前
vue 框架安装系列问题
npm install --global vue-cli 错误提示:vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件 解决: 如果是npm安装的 执行 npm -g bin 把地址添加到环境变量中 如果是yarn 安装的 执行 yarn global bin 把地址添加到环境变量中 运行:yarn r
可莉 可莉
1年前
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Easter79 Easter79
1年前
vue cli创建项目失败
最近使用vue cli创建项目时总是失败,在此分享一下我的解决办法,简单粗暴: npm uninstall -g vue-cli npm uninstall -g @vue/cli npm cache clean --force npm install -g @vue/cli 如果这些操作之后还是不行的话,找到
Easter79 Easter79
1年前
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Easter79 Easter79
1年前
vue 环境搭建笔记
环境 -- 开发工具:VS Code vue版本: 2.x 准备 -- 使用 npm 包管理器进行安装,也可以使用 yarn 包管理器。 可以使用淘宝的 npm 镜像,国内速度更快。 使用方式: $ npm install -g cnpm --registry=https://registry.npm.taobao.org
Easter79 Easter79
1年前
Vue 学习记录(一)
**环境准备** 1. node.js   2. vue-cli **安装配置环境** 1.下载node.js,使用默认配置安装 。 2.使用npm命令安装国内下载镜像(可选)   cmd:  npm install  -g  cnpm  --registry=https://registry.npm.taobao.org   tips:在命