利用Vue3 创建Vue CLI 项目（一）

目录
  • 一、官方文档
  • 二、创建Vue CLI项目
    • 1、安装Vue CLI
    • 2、创建web应用
    • 3、启动web应用
  • 三、Vue CLI项目结构讲解

一、官方文档

Vue3文档 - vuejs
https://www.vue3js.cn/docs/zh/

Vue核心功能：数据绑定

Vue CLI文档
https://cli.vuejs.org/zh/guide/

Vue CLI = Vue.js + 一堆组件

二、创建Vue CLI项目

1、安装Vue CLI

淘宝镜像

SQL:

npm get registry  --显示当前的镜像网址
npm config set registry http://registry.npm.taobao.org  -- 使用淘宝的镜像网址

安装Vue CLI

CSS:

npm install -g @vue/cli@4.5.9

2、创建web应用

SQL:

vue create web

3、启动web应用

费命令行启动。拖动到右侧双击即可

三、Vue CLI项目结构讲解

index.html, main.ts, app.vue三者关联
public和assets两个静态资源文件的引用方法

  • public不参与打包
  • assets会被打包

index.html引入外部静态文件用<%= BASE_URL %>
子文件里的.gitignore文件是会生效的，里面配置的文件规则，是相对当前.gitingore文件所在位置
README.md只有根目录下的生效
package.json 作用类似于pom.xml
eslintrc.js 是一把双刃剑
Vue CLI需要编译才能发布

到此这篇关于利用Vue3 创建Vue CLI 项目的文章就介绍到这了,更多相关Vue3 创建Vue CLI 项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • 浅谈Vue3 父子传值

    目录 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 2.子组件依旧通过 props 来接收并且在模版中使用 子传父: 总结 父传子: 1. 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据" 在这里为了大家区分我将父组件中的数据定义为 : fatherData  , 子组件需要接收的数据定义为: sonData . // 父组件 <template> <div class="a

  • Vue3（二）集成Ant Design Vue

    Vue3（二）集成Ant Design Vue

    目录 一.集成Ant Design Vue 二.组件的使用 1.完整引用 2.组件引用 三.组件使用示例 1.我们在home主页做修改 2.重新启动服务查看效果 四.总结 上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目(一)接下来承接上一篇文章的基础继续展开下面文章的内容 一.集成Ant Design Vue SQL: npm install ant-design-vue@2.0.0-rc.3 --save 兼容性: Ant Design Vue 2.x 支持所有的现代浏览器. 如果

  • vue3:setup的两个注意点详解

    vue3:setup的两个注意点详解

    目录 在vue2中 在vue3中 setup的注意点 setup生命周期在beforecreated之前 setup可以拿到两个参数,props和context context.attrs context.emit context.slot 总结 在vue2中 父组件传属性给子组件 子组件接收属性 如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长 使用的时候名字比较长 vue2,父组件在子组件里使用插槽 打印插槽里的内容 如果父组件使用了子组件2个插

  • vue3 非父子组件通信详解

    vue3 非父子组件通信详解

    目录 第一种方法 App.vue Home.vue HomeContent.vue 数据的响应式 修改响应式Property 总结 业务场景是,不是父子组件实现通信 文件目录 第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <sc

  • Vue3中emits与attrs的区别分析

    Vue3中emits与attrs的区别分析

    目录 结论 实践分析 扩展 总结 结论 当在父组件自定义事件,若没有在子组件中声明时,将自动绑定在父组件的$attrs上:而当在子组件声明时,则不会在父组件的$attrs上出现 实践分析 为了验证emits和attrs的区别,我们构造这样的组件结构 <div> <com-one-vue/> </div> <div> <com-one-vue/> </div> 其具体的Vue文件及代码为(注意,以下语法均采用 setup语法糖 ): A

  • 利用Vue3 创建Vue CLI 项目（一）

    利用Vue3 创建Vue CLI 项目（一）

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • 利用Vue3 (一）创建Vue CLI 项目

    利用Vue3 (一）创建Vue CLI 项目

    目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • Vue3之 Vue CLI多环境配置

    Vue3之 Vue CLI多环境配置

    目录 一.前言 二.实现切换 1.增加开发和生产配置文件 2.修改编译和启动支持多环境 3.修改axios请求地址支持多环境 一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下: NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下,创建线上环境切换配置文件.

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

  • VSCode创建Vue项目的完整步骤教程

    VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • 一篇文章，教你学会Vue CLI 插件开发

    一篇文章，教你学会Vue CLI 插件开发

    前言 如果你正在使用Vue框架,那么你肯定知道Vue CLI是什么.Vue-cli 3,它是Vue.js 开发的标准工具(脚手架),提供项目支架和原型设计. 除了日常构建打包项目,Vue CLI3 的一个重要部分是cli-plugins,插件开发. 本文将教你如何科学的创建一个Vue-CLI 插件,以及项目独立npm包. 1. 什么是CLI plugin 它可以修改内部webpack配置并将命令注入到vue-cli-service.一个很好的例子是@vue/cli-plugin-typescri

  • vue cli中env的使用指南

    目录 前言 简介-官方 示例配置 前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 develo

  • Flutter学习笔记(二)创建一个flutter项目

    目录 开发环境 实践 运行 网络环境配置 (1)进入packages\flutter_tools\gradle 文件夹,然后打开flutter.gradle文件.目录如下图所示: (2)进入 flutter\packages\flutter_tools\gradle 文件夹,然后打开resolve_dependencies.gradle文件,目录如下: 本文就是利用androidstudio创建一个flutter项目并且成功运行起来.其中运行的过程,可能涉及到网络环境配置的问题.觉得过于简单的朋

随机推荐