vue3.0项目的创建
在创建vue工程项目之前要先安装node.js和添加环境变量
若没有完成此操作请上篇：node.js安装与添加环境变量
npm的仓库地址在国外，使用起来网速较慢，建议到淘宝镜像
- 安装nrm：npm install nrm -g （-g表示全局安装）
- 查看nrm的仓库：nrm ls
- 更改淘宝镜像：nrm use taobao
- 再次查看nrm的仓库：nrm ls
安装vue的脚手架
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，通过 npm uninstall vue-cli -g 卸载它。
命令：npm install -g @vue/cli
创建vue工程文件
①： 命令：vue create 项目的名称
②：选择自定义配置，前两个都是自动模式
③：通过方向键 ↑ ↓进行选择，空格确认与取消
1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序5 ( ) Router // vue-router（vue路由）6 ( ) Vuex // vuex（vue的状态管理模式）7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试④：选择3.X版本
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with2.x
> 3.x (Preview)⑤：选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度），简介如下
是否使用history router：
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) Nocss预处理器
主要为css解决浏览器兼容、简化CSS代码 等问题
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)
> LessStylusESLint：提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多
? Pick a linter / formatter config:ESLint with error prevention onlyESLint + Airbnb config
> ESLint + Standard configESLint + Prettier何时检测：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save( ) Lint and fix on commit
如何存放配置 ：
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json
是否保存本次配置（y:记录本次配置，然后需要你起个名; n：不记录本次配置）：
? Save this as a preset for future projects? (y/N)
创建完成：
vue3.0项目的创建相关推荐
- vue3.0项目创建
vue3.0项目创建 可视化创建(手脚架) 命令行创建 可视化创建(手脚架) 1.win+R打开cmd命令行 2.输入vue ui 打开手脚架 vue ui 3.打开项目管理器,选择创建 4.选择项目 ...
- 第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
Vue3.0+Openlayers+Cesium创建二三维联动项目 简介 Vue项目创建 安装依赖 框架结构 地图加载 显示效果 结语 简介 大家好!从今天开始,我将分享我在GIS开发的过程中如何利用 ...
- 创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目 创建前的准备 开始创建 创建过程 项目正常创建 使用v ...
- 从零开始搭建一个管理系统-vue3.0项目创建-----1
从零开始搭建一个管理系统-vue3.0项目创建-----1 讲在前面 webpack构建项目 代码编辑器 依赖修改 码云代码地址 讲在前面 假设你已了解关于 HTML.CSS. JavaScript ...
- 【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的 语 ...
- 认识vue3.0项目的目录结构
上一篇笔记 新建一个vue3.0项目 新建项目后,用vscode打开,会看到项目目录,如下图 来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于 ...
- vue3.0项目实战 - ElementUI框架版
系列文章目录 第一章 论vue3.0和vue2.0区别之编程方式及例子详解 第二章 同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令 第三章 vue3.0项目实战 - Ele ...
- vscode构建Vue3.0项目(vite,vue-cli)
构建Vue3.0项目 构建Vue3.0项目 1.使用Vite构建vue项目的方法以及步骤 1. 安装vite 2. 运行vite + vue 项目 3.说明 2.使用vue-cli构建vue项目的方法 ...
最新文章
- 介绍两个好玩的和Github相关的Chrome扩展
- PHP整理笔记八正则表达式
- ElementUI中el-table设置指定列固定不动,不受滚动条影响
- VTK：Math之MatrixInverse
- mysql命令行导入和导出数据
- 22_python基础—异常
- Java 使用Collections.reverse对list集合进行降序排序
- docker容器不支持中文编码
- Mac使用Docker搭建python测试执行环境
- 18.模板引擎(2)
- Linux下从零搭建WordPress
- 天使和恶魔差异只在一念之间
- 【macOS】Desktop桌面文件突然消失不见解决办法
- 使用Hexo + Gitee Pages搭建个人博客
- QQ空间添加背景音乐
- 此计算机上的操作系统或service pack,win10系统安装补丁失败提示缺少service pack系统组件的设置办法...
- 20170425めも
- 英文事件抽取论文整理
- python版本换行问题
- 4、时间同步的ntp服务安装与配置。
热门文章