使用Vue-cli4创建Vue项目

一、基础环境配置

1、安装nodejs

2、验证

node --version
npm --version

 

 二、全局安装脚手架

1、安装

npm install -g @vue/cli

如果升级本地环境，输入npm uninstall -g vue-cli 全局卸载再安装

 2、验证

vue -V

三、搭建项目

1、 跳转到自己喜欢的盘指定目录下，然后创建项目的命令下面

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

2、 选择手动配置还是默认配置

      default  默认配置

      Manually select features  手动配置

      我选手动配置

3、自定义配置看个人项目需求，我的自定义配置如下

说明 

1).TypeScript： 支持使用 TypeScript 进行编码
2).Progressive Web App (PWA) Support： PWA 支持。
3).Route：r 支持 vue-router 。
4).Vuex： 支持 vuex 状态管理。
5).CSS Pre-processors： 支持 CSS 预处理器。
6).Linter / Formatter： 支持代码风格检查和格式化。
7).Unit Testing：支持单元测试。
8).E2E Testing：支持 E2E 测试。

4、这里我选择3.x的版本

5、选择是否使用路由 history router，Y表示使用history模式，N表达使用hash模式（即URL地址里面带有#），我选Y

6、css的预处理，我选择Less ，其实都差不多，实在不行也可以选stylus 原生的

7、选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，我选择ESLint + Prettier

8、选择什么时候进行代码校验

说明
1).Lint on save 保存就检查。
2).Lint and fix on commit   fix 或者 commit 的时候检查 。

这里我选择第一个，稳。

 9、配置文件存放地方

说明
1).In dedicated config files 独立文件夹位置。
2).package.json 在package.json文件中。

我选择第二个

 10、是否记录这次配置，我选择不记录

11、 开始创建项目

四、启动

1、根据提示，进入项目文件里面，输入npm run serve命令启动项目

 2、项目启动成功界面如下：

标签：npm,cli4,Vue,项目,创建,配置,支持,选择,vue
来源： https://blog.csdn.net/qq_33235582/article/details/120974284