vue

1、脚手架的搭建(CLI)

1.1、下载nodejs,在官网,

[nodejs官网地址][ https://nodejs.org/en/ ]

无脑下一步就可以了。环境自动安装

1.2、下载脚手架之前,配置阿里云镜像

cmd指令:

npm config set registry httpS://registry.npm.taobao.org

注:不用每次都配置,配置一次即可

1.3、安装全局@vue/cli

cmd指令:

npm install -g@vue/cli

1.4、切换到你需要创建项目的目录

cmd指令:

vue create xxxx(项目的名称,例如vue_test)

1.5、启动项目

cmd指令:

npm run serve

注:如果启动是遇到这样的错误:

Component name "School" should always be multi-word vue/multi-word-component

因为名称的问题:

可以在vue.config.js配置文件中加上这一个键值对:lintOnSave:false

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})

Vue脚手架(CLI)第一天的更多相关文章

  1. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  2. Vue 框架-10-搭建脚手架 CLI

    Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中,而不是浏览器 实现页面自动 ...

  3. 关于npm和yarn 安装vue脚手架

    第一篇博客有点小紧张.轻喷~ 第一步:安装node.js       地址 --------https://nodejs.org/en/ 详细步骤这里就不写了    可以去看     地址 ----- ...

  4. 前端开发3年了,竟然不知道什么是 Vue 脚手架?(下)

    上一篇文章<前端开发3年了,竟然不知道什么是 Vue 脚手架?(上)>介绍了什么是脚手架,以及Vue-cli 2.x如何创建项目,创建的项目结构.这篇文章介绍 Vue-cli 3.x 如何 ...

  5. vue - Vue脚手架

    今天的内容vue脚手架,越来越有内味了,也慢慢地开始有点难度了哈哈,但是没有关系,慢慢学慢慢琢磨,我倒是感觉有点越来越像node了,不知道怎么回事,这是要向后端发展的节奏啊 一.初始化Vue脚手架 1 ...

  6. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  7. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  8. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  9. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  10. 用vue脚手架创建bootstrap-vue项目

    用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...

随机推荐

  1. Yaml中特殊符号"| > |+ |-"的作用

    "|",保留每行尾部的换行符\n. ">",删除每行尾部的换行符\n,则看似多行文本,则在程序中会将其视为一行. include_newlines: | ...

  2. 关于我学git这档子事(5)

    对于错误: fatal: refusing to merge unrelated histories 解决之道: git pull origin main --allow-unrelated-hist ...

  3. Blazor WebAssembly + Grpc Web = 未来?

    Blazor WebAssembly是什么 首先来说说WebAssembly是什么,WebAssembly是一个可以使C#,Java,Golang等静态强类型编程语言,运行在浏览器中的标准,浏览器厂商 ...

  4. redisson之分布式锁实现原理(三)

    官网:https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95 一.什么是分布式锁 1.1.什么是分布式锁 分布式锁,即分布式系统中的锁 ...

  5. Linux常用操作:文件及文件夹

    一.创建 (1)mkdir 创建一个目录 (2)touch 创建一个空文件 注:-r 表示递归操作 二.删除 rm 删除文件 rm -r 删除目录 rm -r * 删除目录下的所有文件 注:-f 不用 ...

  6. BUUCTF-小明的保险箱

    小明的保险箱 16进制打开可以发现存在一个RAR压缩包,压缩包里面应该就是flag文本 使用ARCHPR破解即可

  7. Min-max 容斥与 kth 容斥

    期望的线性性: \[E(x+y)=E(x)+E(y) \] 证明: \[E(x+y)=\sum_i \sum_j(i+j)*P(i=x,j=y) \] \[=\sum_i\sum_ji*P(i=x,j ...

  8. Aborted wiping of zfs_member.1 existing signature left on the device.Aborting pvcreate on /dev/sda

    看意思是有什么签名在上面,创建不了逻辑卷,确认数据备份的情况下执行对应的下面命令: wipefs --all --force /dev/sdax

  9. mybatis collection解析以及和association的区别

    1.collection标签 说到mybatis的collection标签,我们肯定不陌生,可以通过它解决一对多的映射问题,举个例子一个用户对应多个系统权限,通过对用户表和权限表的关联查询我们可以得到 ...

  10. ArrayDeque(JDK双端队列)源码深度剖析

    ArrayDeque(JDK双端队列)源码深度剖析 前言 在本篇文章当中主要跟大家介绍JDK给我们提供的一种用数组实现的双端队列,在之前的文章LinkedList源码剖析当中我们已经介绍了一种双端队列 ...