【Vue篇】Vue 项目下载、介绍(详细版)

如何创建一个vue项目?首先要有环境,如下:

nodejs
vue-cli

如果有以上的工具就直接跳过安装教程
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

创建vue项目

选择一个位置,你要存放项目的路径,然后在此位置上终端 或者 cmd
个人推荐方法二

方法一

1、创建

vue init webpack ”项目名称“

2、启动

切换到项目目录然后运行

cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever

方法二

1、 创建

vue create 项目名
在这里插入图片描述

Default([Vue 3] babel, eslint)表示以Vue3为基础的模板,带eslint检查
Default([Vue 2]babel, eslint)表示以Vue2为基础的模板,带eslint检查
Manually select features 自定义配置

注意:空格键是选中与取消,A键是全选
在这里插入图片描述

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing //单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试

(上述按需所取)
补: 如果第一步全选话会出现以下选项

Use class-style component syntax? (Y/n):是否使用class风格的样式语法(TypeScript)
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) :是否使用class风格的组件语法(TypeScript) yes
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n):是否使用history模式
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
选择预处理的模式
( )Sass/SCSS (with dart-sass)
( )Sass/SCSS (with node-sass)
( )Less
( )Stylus
Pick a linter / formatter config: (Use arrow keys):选择语法检测规范
( )TSLint
( )ESLint with error prevention only
( )ESLint + Airbnb config
( )ESLint + Standard config
( )ESLint + Prettier
Pick additional lint features: (Press to select, to toggle all, to invert selection)选择 保存时检查 / 提交时检查
(*) Lint on save
( ) Lint and fix on commit
引用
Pick a unit testing solution: (Use arrow keys) :测试方式
( )Mocha + Chai
( )Jest
引用
Pick a E2E testing solution: (Use arrow keys) :e2e测试方式
( )Cypress (Chrome only)
( )Nightwatch (Selenium-based)
引用
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)选择配置信息存放位置,单独存放或者并入package.json
( )In dedicated config files
( )In package.json
Save this as a preset for future projects? (y/N) :是否保存当前预设,下次构建无需再次配置

完成

2、启动

切换到项目目录然后运行

cnpm install  #安装项目依赖
npm run dev  #启动 或者  nmp run sever

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/127484.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海保人寿:开源治理保障科技与保险融合,助力保险业务数字化改革创新

海保人寿保险股份有限公司(简称“海保人寿”)是第一家在海南筹建开业的全国性保险机构。从成立之初,便深耕于数字化创新,在自身多业务环节中实现数字化转型,依托优秀的研发体系与数智融合的业务系统,不断推…

RocketMQMessageListener使用错误问题分析与排查

背景 RocketMQ与SpingBoot相结合可以大大降低我们开发的复杂度,但是最近在一个新项目中使用RocketMQMessageListener 监听消息,导致消费者启动失败,提示该消费组已经被创建了,请重新申请一个消费者组。 Caused by: org.apache.r…

【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表List详解(初始化、索引、切片、更新、删除、常用函数、拆包、遍历)

目录 一、前言 二、实验环境 三、Python容器(Containers) 0、容器介绍 1、列表(List) 1. 初始化 a. 创建空列表 b. 使用现有元素初始化列表 c. 使用列表生成式 d. 复制列表 2. 索引和切片 a. 索引 b. 负数索引 c. 切…

龙迅LT86102UX HDMI一进二出,支持分辨率4K60HZ

龙迅LT86102UXE 1. 描述 龙迅LT86102UX HDMI2.0 分路器具有符合 HDMI2.0/1.4 规范的 1:2 分路器、最大 6Gbps 高速数据速率、自适应均衡 RX 输入和预强调的 TX 输出,支持长电缆应用,板载无 XTAL,可节省 BOM 成本。 LT86102UX HDM…

【Linux】- Linux下搭建Java环境[IDEA,JDK8,Tomcat]

Java环境 1. 安装JDK2.安装tomcat3.安装idea4. 安装MySQL5.7 1. 安装JDK /usr/local:存放用户自行安装的软件,默认情况下不会被系统软件包管理器管理 发现解压后的文件已经整体移动到/usr/local/java 文件夹下 打开bin目录,可以看到java的版…

Nginx参数配置详细说明【全局、http块、server块、events块】【已亲测】

Nginx重点参数配置说明 本文包含Nginx参数配置说明全局块、http块、server块、events块共计30多个参数配置与解释,其中常见参数包含配置错误出现的错误日志,能让你更快的解决问题。 该文的所有参数大部分经过单独测试,错误都是自己收集出来的…

每日刷题-3

目录 一、选择题 二、编程题 1、计算糖果 2、进制转换 一、选择题 1、 解析:在C语言中,以0开头的整数常量是八进制的,而不是十进制的。所以,0123的八进制表示相当于83的十进制表示,而123的十进制表示不变。printf函数…

(翻译)JavaFX高级教程:JavaFX2.0的FXML语言

原文地址http://download.oracle.com/javafx/2.0/fxml_get_started/jfxpub-fxml_get_started.htm FXML是JavaFX 2.0新引入的。你可能会问"What is FXML?" 和"Is FXML for me?" FXML 是基于XML的一种声明性标记语言,用来定义应用的用户接口。F…

QT设计一个小闹钟

设置一个闹钟,左侧窗口显示当前时间,右侧设置时间,以及控制闹钟的开关,下方显示闹钟响时的提示语。当按启动按钮时,设置时间与闹钟提示语均不可再改变。当点击停止时,关闭闹钟并重新启用设置时间与闹钟提示…

【MySQL】详解聚合查询、多表查询

MySQL 增删查改(进阶) 文章目录 MySQL 增删查改(进阶)01 表的设计表的三大范式 02 查询操作进阶新增聚合查询countsumavgmaxmin 分组查询 GROUP BYHAVING 联合查询/多表查询关键思路引入内连接外连接左外连接:left joi…

有限状态机的概念

一、有限状态机的概念 有限状态机简称状态机,是表示有限个状态,以及在状态之间的转移和动作等行为的数学模型。状态机的要素有状态和状态转移两个。 在Unity中,动画状态机最重要的属性就是节点和连线,其中每个节点都是一个动画片…

Emscripten安装并配置环境变量

前言 Emscripten官网 官网有安装教程,但有些细节没有讲清楚,本文会很详细的讲解每一步。 一、下载 emsdk 包 emsdk – github地址 可以使用 git 去拉取,不过可能会超时拉取失败。 git clone https://github.com/emscripten-core/emsdk.…

数据结构与算法-队列

一.队列的基本概述 1.队列的定义 答:队列是现在在两端进行插入和删除操作的线性表,"队尾"是允许进行存入…

系统软件启动过程

实验一:系统软件启动过程 参考 重要文件 调用顺序 1. boot/bootasm.S | bootasm.asm(修改了名字,以便于彩色显示)a. 开启A20 16位地址线 实现 20位地址访问 芯片版本兼容通过写 键盘控制器8042 的 64h端口 与 60h端口。b.…

ApachePulsar原理解析与应用实践(学习笔记一)

随着时代的发展,软件设计的理念也在不断发展,从单体服务、面向服务、微服务,发展到云原生以及无服务。其演变的过程是一个能力不断增强,领域边界不断微分细化的过程。比如无服务就是将函数作为服务,就类似dns模式的服务…

什么是50ETF期权开户条件,怎么开期权交易权限?

50ETF期权是指上证50ETF期权,标的物是上证50ETF,代码是(510500),期权是一种在上证50ETF基础上进行衍生品交易的金融工具,下文科普什么是50ETF期权开户条件,怎么开期权交易权限?本文来…

死锁

目录 什么是死锁 产生的条件 死锁避免 银行家算法 问题引入 银行家算法的实现思想 死锁检测 每种类型一个资源的死锁检测 每种类型多个资源的死锁检测 死锁恢复 鸵鸟算法 什么是死锁 线程死锁是指由于两个或者多个线程互相持有对方所需要的资源,导致这些线…

3.3.2 【MySQL】客户端和服务器通信中的字符集

3.3.2.1 编码和解码使用的字符集不一致的后果 我们知道字符 我 在 utf8 字符集编码下的字节串长这样: 0xE68891 ,如果一个程序把这个字节串发送到另一个程序里,另一个程序用不同的字符集去解码这个字节串,假设使用的是 gbk 字符集…

3ds max插件CG MAGIC中的室外功能可以高效出图吗?

使用3ds Max高效出图秘诀有没有什么秘诀呢?如何做到快速出图呢? 3ds max插件CG MAGIC中的室外功能可以高效出图吗? CG MAGIC 是一款基于3DS max深入开发的智能辅助设计插件。 自从CG Magic专业版上线之后,小伙伴们对新功能诀窍…

Java中如何进行加锁??

笔者在上篇文章介绍了线程安全的问题,接下来本篇文章就是来讲解如何避免线程安全问题~~ 前言:创建两个线程,每个线程都实现对同一个变量count各自自增5W次,我们来看一下代码: class Counter{private int count0;publi…