第一步:检查一下电脑是否安装了vue以及vue-cli

用vue -V检查版本,如果出现“vue” 不是内部或外部命令,也不是可运行的程序或批处理文件,就说明你电脑没有安装vue

没安装的就需要安装再进行下一步了:详细看官网怎么安装,下面放的链接

安装 | Vue CLI (vuejs.org)

第二步:新建一个文件夹用于建立项目

第三步:输入创建项目的命令,vue  create  name,这个name是项目名称,注意name必须是英文。

Default是默认选择(vue2,vue3),Manually select features 是自己手动选择,可以选择你需要的。通常都是自己手动选择,键盘上下键选择,enter确定。

确定后会出来很多选项。当然我的英语也是非常烂的,借助翻译给大家看一下。

1 TypeScript
是否使用class风格的组件语法:Use class-style component syntax?
是否使用babel做转义:Use Babel alongside TypeScript for auto-detected polyfills?2. Router 路由管理器
路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 3. CSS Pre-processors css预处理
选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
选项:LessSassStylus4. Linter / Formatter 代码风格、格式校验
选择Linter / Formatter类型:Pick a linter / formatter config:
选项:TSLintESLint with error prevention only  仅错误预防ESLint + Airbnb config  Airbnb配置ESLint + Standard config 标准配置ESLint + Prettier
选择lint方式:Pick additional lint features
选项:Lint on save 保存时检查Lint and fix on commit 提交时检查5. Unit Testing 单元测试
选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
选项:Mocha + Chai  Jest 6. E2E Testing E2E(End To End)即端对端测试
选择E2E testing类型:Pick a E2E testing solution: (Use arrow keys)
选项:Cypress (Chrome only) Nightwatch (Selenium-based)7. 选择 Babel, PostCSS, ESLint 等自定义配置的存放位置Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json8. 将此作为将来项目的预置吗?Save this as a preset for future projects?选项:In dedicated config files 在专用的配置文件中In package.json 在package.json9.保存预设为模板
Save preset as:

选择自己需要的以后,按下回车再次选择自己需要的。(我选的2)

像这种要选择yes还是no的一般情况下都是选择no,可以避免下次写特殊项目不好配置。

上一步选择no以后,会让你选着CSS 预处理语言。选择你会用的。

再然后也是一些选项,按照翻译选择自己需要的,我这里选的倒数第二个。

选择第一个。

选择第二个。下图是选择后的图。再输入n,就开始创建项目啦

创建项目的过程会有一段时间。

创建完成后会有一个进入项目,和运行项目的命令提示。

坐等运行就可以啦。

如果报错,请看下一篇文章!!!!!!!!!

vue-cil创建vue项目相关推荐

  1. Vue脚手架创建的项目的启动流程

    Vue脚手架创建的项目的启动流程 当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析. 入口分析 首先从package.json中的脚本配置来看,np ...

  2. VS Code安装VUE及创建VUE项目

    VS Code安装VUE及创建VUE项目 一.在搭建vue的开发环境之前,先下载node.js,vue的运行是要依赖于node的npm管理工具来实现,下载地址:http://nodejs.cn 二.n ...

  3. 使用Vue cli创建Vue项目

    使用Vue cli创建Vue项目 第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...

  4. Vue - vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决

    vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决 一. 页面显示空白 二. 背景图片不显示 一. 页面显示空白 解决方法: config > index.js ...

  5. 使用 Vue CLI 创建 Vue 2.x 项目

    使用 Vue CLI 创建 Vue 2.x 项目 什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...

  6. Vue脚手架创建TS项目

    What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...

  7. Vue vscode 创建 vue 项目流程【超详细】

    文章目录 一.安装node 二.配置淘宝镜像 三.配置 vscode(win10) 四.全局安装脚手架 五.创建项目 六.进入项目 七.项目结构 一.安装node 请在官网下载安装:https://n ...

  8. vue - - - - vite创建vue3项目(不使用TS)

    vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...

  9. 第一个vue案例 创建vue实例化对象

    Vue的使用 1.先导入vue.js         <script src="vue.js"></script>     2.创建vue实例化对象 < ...

  10. 【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序

    Vue3 安装 在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...

最新文章

  1. Windows 使用 Gogs 搭建 Git 服务器
  2. python中的列表生成式
  3. javascript提取标签之间的信息
  4. 计算机在社区健康档案管理中的作用,某社区卫生中心对辖区居民的健康档案信息进行电子化。一直建档居民的年龄范围在1..._考试资料网...
  5. linux ipconfig和route 命令
  6. 苹果试图将AirPods打造成健康产品 可监测体温和姿势
  7. ASP.NET MVC 1.0 学习笔记(随时更新)
  8. CSS3下的渐变文字效果实现
  9. ajax如何用编号查询姓名,Ajax js 使用Ajax检测用户名是否存在
  10. 常见的7种深度学习框架对比
  11. Slideshow Maker for mac(幻灯片制作软件)
  12. JAVA 项目中使用 H2 数据库
  13. 新城建产品 DTCIM
  14. 将多个Excel文件合并为一个(实测有效)
  15. GIS+区块链,地理空间数据新型应用场景未来可期
  16. python 拼音库_python有没有拼音库python进阶之socket详解
  17. 天下武功唯快不破——实验吧
  18. .CS文件编译生成.DLL文件 .EXE文件
  19. CAN analyzor - CAN分析仪
  20. JVM崩溃错误:发生在Problematic frame C [KERNELBASE.dll+0xc54f]

热门文章

  1. java遍历map并赋值的最优解
  2. 【python】opencv双边滤波
  3. 广州电信IPTV长虹IHO-3300AD_非高安_S905L3_线刷固件包
  4. Neo4j 操作与 py2neo 用法
  5. Android 图形系统概述
  6. ug后处理安装步骤是什么?ug后处理怎么添加?ug后处理文件位置路径?ug10后处理安装步骤?
  7. mybatis-plus自定义sql报错 ew.customSqlSegment
  8. 纪伯伦先知_先知的时间序列分析:航空乘客数据
  9. 阿里大鱼进行发短信业务---使用详细步骤-Java操作
  10. Django 操作MySQL数据库