首页 > 其他分享 >创建Vue项目的三种方式

创建Vue项目的三种方式

时间:2024-03-15 13:00:11浏览次数:19  
标签:Vue cli 创建 create init vue 三种

1、vue create(首选)

create a new project powered by vue-cli-service

以这种方式创建的项目,vue版本是当前最稳定的版本,不是最新的。

首先打开控制台,输入下面的命令。

vue create 项目名称

image-20221120220018976

按键盘上的上下键,选择 Manually select features(手动配置)。

image-20221120220300712

通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选,选择好了之后,敲击回车键。

image-20221120220341208

现在选择Vue的版本。

可能需要选择 CSS 处理器的类型 - less

babel 配置的存放位置 - 单独的存放位置

是否保存当前的配置 - 不保存

2、vue ui

在浏览器打开一个图形化界面创建项目

可视化ui,这个没什么好说的。

vue ui

3、npm init

基于 create-vue,不同于 vue-cli

npm init vue@latest #或者 npm init vue@3
# 两者等效

安装最新版vue3,预置vite

image-20221120234907211

npm init vue@2

image-20221121000028097

以这种方法安装的是当前较新的vue2版本。

预置vite

4、vue init

从远程模板生成项目(遗留API,需要@vue/cli-init)

首先全局安装 @vue/cli-init

npm i -g @vue/cli-init

可以通过下面这条命令来创建Vue项目

vue init webpack project

区别

  • vue create 命令是vue-cli3.x提供创建Vue项目的方式,模板是固定的,模板选项可自由配置。
  • vue ui 命令也是vue-cli3.x提供创建Vue项目的方式,可以通过操作可视化页面来创建和管理Vue项目。
  • vue init 命令是vue-cli2.x提供创建Vue项目的方式,可以使用github上面的一些模板来初始化项目。比如 webpack就是官方推荐的标准模板。

标签:Vue,cli,创建,create,init,vue,三种
From: https://www.cnblogs.com/yecss/p/18075168

相关文章

  • VS Code配置Vue3模板代码
    打开VSCode,file-Preferences-ConfigureUserSnippets{"Printtoconsole":{"prefix":"vue","body":["<scriptsetuplang=\"ts\">","i......
  • Vue3生命周期 及和vue2的对比
    一、Vue3中的生命周期1、setup():开始创建组件,在beforeCreate和created之前执行,创建的是data和method2、onBeforeMount():组件挂载到节点上之前执行的函数;3、onMounted():组件挂载完成后执行的函数;4、onBeforeUpdate():组件更新之前执行的函数;5、onUpdated():......
  • MirageJS 使用总结 vue2上亲测使用
    注:MirageJS英文文档看的头疼,且百度上都是片段比较多,本着拿来主义的思路,就把代码粘贴上,这样不仅方便自己,也能方便大家简单介绍一下他的好处及功能MirageJS是一个用于模拟服务器端数据和网络请求的JavaScript库,它可以帮助开发者在前端环境中创建假数据、定义路由和处理请求。......
  • 【vue3】关于ref、toRef、toRefs
    1.ref函数,可以把简单数据类型包裹为响应式数据(复杂类型也可以),注意JS中操作值的时候,需要加.value属性,模板中正常使用即可2.toRef函数的作用:转换响应式对象中某个属性为单独响应式数据,并且转换后的值和之前是关联的(ref函数也可以转换,但值非关联)3.toRefs函数的作用:转换响......
  • vue3 批量导入excel表
    安装xlxs插件npminstallxlsx//安装import*asXLSXfrom"xlsx";//引入 批量导入里面引用了element-plus的loading和弹窗,不需要的可以去掉letexcelloading;constimportExcel=(e)=>{//导入excelvarfile=e.target.files[0];if(......
  • vue3中setup使用及其语法糖的用法
    使用setup语法糖后,不用写setup函数;组件只需要引入不需要注册;属性和方法也不需要再返回,可以直接在template模板中使用。.setup语法糖中新增的apidefineProps:子组件接收父组件中传来的propsdefineEmits:子组件调用父组件中的方法defineExpose:子组件暴露属性,可以在父组件中......
  • vue2与vue3的区别
     vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用了es5的一个APIObject.definepropert()对数据进行劫持结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。1.vue2和vue3双向数据绑定原理发生了改变相比与vue2,使用proxyAPI优势有:de......
  • 搭建vue3版taro以及相关api
    1.安装Taro1.使用npm或者yarn全局安装@tarojs/cli$npminstall-g@tarojs/cli$yarnglobaladd@tarojs/cli2.项目初始化:taroinitmyApp编译运行使用Taro的build命令可以把Taro代码编译成不同端的代码,然后在对应的开发工具中查看效果。Taro编译分......
  • Vue2/3 实现动态循环的select下拉框去重功能:
    需求:前面下拉框选择某个选项(如:1)了,后面的下拉框不能在有前面选中内容的该选项(即不能在出现1的下拉选项)【Vue实现动态循环出的多个select不能重复选择相同的数据】注:下面注释的都可以根据需求更改 代码<template><divid="app"><divv-fo......
  • Java基于 Springboot+Vue 的招生管理系统,前后端分离
    博主介绍:✌程序员徐师兄、8年大厂程序员经历。全网粉丝15w+、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌......