新建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 项目—步骤相关推荐

vue cli创建vue3.0项目步骤
1.安装node.js(node.js下载地址) 2. 全局安装vue-cli最新版本 npm install -g @vue/cli 安装成功后,可以通过 vue -V 查看下载的@vue/cli版 ...
认识vue3.0项目的目录结构
上一篇笔记新建一个vue3.0项目新建项目后,用vscode打开,会看到项目目录,如下图来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于 ...
vscode构建Vue3.0项目(vite,vue-cli)
构建Vue3.0项目构建Vue3.0项目 1.使用Vite构建vue项目的方法以及步骤 1. 安装vite 2. 运行vite + vue 项目 3.说明 2.使用vue-cli构建vue项目的方法 ...
vue3.0项目搭建全过程
新建一个vue3.0项目,主要有以下8个步骤,所有步骤均在终端内完成 [1] 升级vue-cli项目至 vue/cli4.0以上先卸载 npm uninstall vue-cli -g 全局安装脚手 ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
vite 搭建 Vue3.0项目
vite 搭建 Vue3.0项目 vue3.0+TS+AntDesignVue项目 vite 初始化vite项目配置项目配置typescript 配置Vue Router 配置Vuex 配置Ant ...
手把手教你vue3.0项目搭建
前言:最近公司想重构一个项目,CTO选择了vue3.0 + ant-design-vue技术栈,正好自己也想尝试一下,试着搭建一下,以后有更好的会及时补充修改注:粗体是命令指令,推荐使用cnpm指令 ...
vue3.0项目创建
vue3.0项目创建可视化创建(手脚架) 命令行创建可视化创建(手脚架) 1.win+R打开cmd命令行 2.输入vue ui 打开手脚架 vue ui 3.打开项目管理器,选择创建 4.选择项目 ...

新建vue3.0 项目—步骤

新建vue3.0 项目—步骤相关推荐

最新文章

热门文章