新建vue3.0 项目—步骤详细介绍
一、环境搭建
1、安装node环境(版本≥ 8.9)
2、安装vue-cli3.0
npm install @vue/cli -g
此处省略安装步骤截图了,相信各位都已装好了,下图为查看版本结果:
二、建项目
1、vue create 搭建新项目
vue create <Project Name> //文件名 不支持驼峰(含大写字母)
我没有卸载旧版本的 vue-cli(1.x 或 2.x),所以创建时也会出现vue2.0
2、自定义配置,根据你需要用箭头上下键选择(按 “空格键”选择/取消选择,A键全选/取消全选,I键进行反选)对应功能
3、我没有卸载旧版本的 vue-cli(1.x 或 2.x),所以创建时需要选择2.0 还是 3.0
4、是否用history模式来创建路由 —— 我选 Y
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的
//index.js
const router = new VueRouter({
mode: "history",
routes
});
5、css预处理器(主要为css解决浏览器兼容、简化CSS代码 等问题) —— 我选 Less
6、ESLint:提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多 —— 我选 ESLint + Prettier
7、何时检测 —— 我选 Lint on save
lint on save //在保存时进行检测
lint and fix on commit //在fix和commit是进行检查
8、单元测试 —— 我选 Jest
9、如何存放配置 —— 我选 In dedicated config files
10、是否保存本次配置(y:记录本次配置,然后需要你起个名; n:不记录本次配置) ——我选N
11、配置完成,开始编译
12、编译完成,开始运行
13、运行成功
新建vue3.0 项目—步骤详细介绍的更多相关文章
- 从零搭建vue3.0项目架构(附带代码、步骤详解)
前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...
- Apache Spark 2.2.0 新特性详细介绍
本章内容: 待整理 参考文献: Apache Spark 2.2.0新特性详细介绍 Introducing Apache Spark 2.2
- vue2.0与vue3.0项目创建
脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...
- 新建com组件项目步骤
一.菜单栏 新建->项目->ATL->ATL项目->动态链接库 后续默认完成二.菜单栏 项目->添加类->ATL控件->“写入类的命名如:CeshiMai ...
- 使用 IDEA 创建 SpringBoot 项目(详细介绍)+ 源码案例实现
使用 IDEA 创建 SpringBoot 项目 一.SpringBoot 案例实现源码 二.SpringBoot 相关配置 1. 快速创建 SpringBoot 项目 1.1 新建项目 1.2 填写 ...
- 利用eclipse新建一个maven项目步骤:
1.打开eclipse,左键点击左上角File,选中New,左键点击选中Maven Project,出现下面界面: 2.把打钩的去掉,选择自己项目所在的工作空间,如下图,我建在我的工作空间worksp ...
- Vue3.0项目快速搭建
安装安装vue-cli npm install -g @vue/cli # 或者 yarn global add @vue/cli 创建项目 vue create hello-world 至此项目搭建 ...
- 新建React Native项目步骤
根据官方环境 https://reactnative.cn/docs/getting-started/ 搭建好之后 1.新建项目 打开React Native 命令行工具,并输入 react-nati ...
- 源代码管理工具(1)——SVN(1)——SVN 的使用新手指南,具体到步骤详细介绍----TortoiseSVN
一.客户端的使用: TortoiseSVN(下载地址:https://pan.baidu.com/s/14cAEV5ZfMA9mLlQAb4oznw 这里有包含中文版的语言包). 1.先下载安装(这个 ...
随机推荐
- Java基础复习(四)
1.Integer与int的区别 int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为int提供的封装类.int的默认值为0,而Integer的默 ...
- WEB前端开发--1(Web前端开发综述)
Web前端开发 Web--Web系统 前端--网页上为用户呈现的部分 开发--编写代码 1. 前端与后端 前端:网页上为用户呈现的部分 后端:与数据库进行交互,完成数据存取 2. 网站与 ...
- [源码解析] NVIDIA HugeCTR,GPU 版本参数服务器 --(1)
[源码解析] NVIDIA HugeCTR,GPU版本参数服务器 --(1) 目录 [源码解析] NVIDIA HugeCTR,GPU版本参数服务器 --(1) 0x00 摘要 0x01 背景 1.1 ...
- 【论文考古】Training a 3-Node Neural Network is NP-Complete
今天看到一篇1988年的老文章谈到了训练一个简单网络是NPC问题[1].也就是下面的网络结构,在线性激活函数下,如果要找到参数使得输入数据的标签估计准确,这个问题是一个NPC问题.这个文章的意义在于宣 ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第02章 - 部署etcd集群
文章目录 1.2.部署etcd集群 1.2.0.下载etcd二进制文件 1.2.1.创建etcd证书和私钥 1.2.2.生成etcd证书和私钥 1.2.3.配置etcd为systemctl管理 1.2 ...
- AI 神经网络理解
神经网络理解 原文写于2019-12-05,2021-12-08改为markdown
- c++ 字符串替换程序 p324
字符串替换程序 C++ Primer 324页 // replace:从str字符串中查找oldVal字符串,如果找到就替换成newVal字符串. void replace(string &s ...
- Linux-CPU优化之上下文切换
为什么大量进程(通常进程数大于CPU个数)的运行会导致CPU长时间处于等待时间而导致平均负债率过高呢?没有使用CPU且无不可中断的进程,这就涉及到了上下文切换. 巧妙地利用了时间片轮转的方式, CPU ...
- Python中random模块的用法案例
1 import random # 调用random模块 2 3 a = random.random() # 随机从0-1之间抽取一个小数 4 print(a) 5 6 a = random.rand ...
- 『无为则无心』Python面向对象 — 56、Python多态
目录 1.Python中的多态 (1)多态的定义 (2)多态的好处 (3)多态实现步骤 2.体验多态 1.Python中的多态 (1)多态的定义 多态是一种使用对象的方式,子类重写父类方法,不同的子类 ...