创建项目vue项目

必须提前安装好 node 环境,并首先全局 安装 vue-cli3 脚手架

npm install -g @vue/cli

装完之后可以查看一下是否已经安装,我这里安装的版本是 @vue/cli@3.5.1

npm list -g --depth 0
8D8F61E5-118A-473e-9614-F072851DC90C.png

创建项目
运行下面命令创建一个项目

vue create myapp

选择配置,默认配置还是手动,这里我选择手动 Manually


createApp.png

配置相关的插件和功能


配置相关的插件和功能.png

这里选择自己需要的一些插件和功能,我想试一下typescript,所以选上,

  • typescript
  • vue-router
  • vuex
  • css预处理器
  • 格式检查
  • 单元测试
class-style.png

是否使用class风格的组件语法,这里选y,脚手架就会帮我们安装以下组件

  • vue-class-component
  • vue-property-decorator

是否使用babel做转义,选y


babel.png

是否选择 history 模式路由规则,我这里选择 y


historyRouter.png

选择一种css预处理语言,这里我选择sass


node-sass.png

选择一种校验规则,我选择TSLint


linter.png

选择校验的时机

  • 保存的时候校验
  • 提交的时候校验


    lintfeature.png

选择单元测试的配置,这里选择Mocha + Chai


unitTest.png

这里是询问怎么存放babel,postcss,eslint等的配置文件

  • 单独存放
  • 集成在package.json

我选择第一项,单独存放


配置存储位置.png

询问是否保存当前配置,我选择否


image.png

配置好了,开始安装


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: CLI:@vue/cli...
    zhyzhyzz阅读 30,752评论 1 17
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 3,007评论 1 4
  • 为了便于 Vue 项目的管理, Vue 团队官方开发了 vue-cli 工具。 本文将带您使用 vue-cli 快...
    yibuyisheng阅读 21,594评论 0 20
  • 什么是 webpack 是前端的一个项目构建工具,他是基于 Node.js 开发出来的一个前端工具 如何完美实现上...
    千见阅读 1,517评论 0 0
  • 以前总对朋友圈里的心灵鸡汤嗤之以鼻,最近才发现说的也不无道理。你重要么?以前觉得自己重要,随着时间的慢慢推移...
    田琼琼阅读 500评论 0 0