第一步:检查一下电脑是否安装了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. Java8简明学习之接口默认方法
  2. 自己做网站,论坛类型的
  3. linux文件管理课程设计,操作系统原理课程设计-Linux文件管理系统的仿真.doc
  4. 严蔚敏数据结构习题第十章
  5. Alibaba Cloud Linux 等保 2.0 三级版操作系统详解
  6. IDEA使用教程之创建一个工程(一)
  7. 如何将pdf文件转换成图片格式,插入到word中
  8. 【数据压缩】作业1:分析浊音清音爆破音的时域和频域特性以及RGB熵的计算
  9. 计算机主机的拆卸的注意事项,拆解笔记本注意事项及技巧!
  10. LFY-SpringBoot1【课程概述、springboot2概述】
  11. 云服务器分割成虚拟主机销售,IDC行业为何兴起云虚拟主机业务
  12. 病来如山倒,病去如抽丝
  13. python写入指定的excel_python 写入Excel
  14. 【日拱一卒行而不辍20220926】自制操作系统
  15. 《时令绝杀技——向上汇报》
  16. 股票自选股基本函数大全-1
  17. C语言读取和存储bmp格式图片
  18. 浅谈C++类与对象(一)
  19. 简单保护动物网页制作stu-works.com学生保护动物网页设计作品HTML 濒危动物静态网页成品下载
  20. 三万块钱6天的区块链培训,我学会了搭建区块链系统框架?

热门文章

  1. android studio下使用TUTK SDK
  2. Hyperledger Fabric区块链供应链金融实战1
  3. NTFS FOR MAC(paragon Software),关于升级10.15.7最新系统后,无法使用写入加载的临时解决办法
  4. TCP/IP 四层模型 图文详解
  5. DAO 、CUID、CRUD 是什么?
  6. 微信小程序和uniapp高频面试题
  7. 小天博客[xtboke.com]
  8. CCF推荐|JCR4区通信网络类SCI,仅1-2个月左右录用~
  9. 深度解读:云网融合的多云网络
  10. 提高开发效率的15个idea插件