vue-cli（脚手架）搭建项目详细

在使用vue-cli之前，请确认你的电脑已经安装了 node，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)，如果还未安装node请参考https://www.runoob.com/nodejs/nodejs-install-setup.html。
安装vue-cli命令

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

检查vue-cli版本号命令： vue --version，不确定是否安装成功，可以输入检查版本号命令，如果没报错返回版本号，则说明安装成功
安装vue-cli也可参考https://cli.vuejs.org/zh/guide/installation.html

######vue-cli搭建项目

vue init webpack vue-demo

敲击回车下面开始会有很多问题，一问一答形式，蓝色截图为问题，截图下为解释和个人建议选择

项目名称，默认是上面初始化时候默认的名称，可以修改也可以直接回车(注意不能出现大写字母，否则会报错Sorry, name can no longer contain capital letters)，阮一峰老师博客《为什么文件名要小写》http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html ，有兴趣可以了解一下。
输入项目描述，看自己需要 输入好后回车

作者，默认本机机主名称，若无需更改直接回车就可以官方推荐选择 Runtime + Compiler: recommended for most users 运行＋编译 ，输入y回车
是否使用vue-router 配置路由，生成好的项目就会有相关的路由配置文件，推荐选择，输入y回车

是否使用 ESLint 作为代码规范，统一项目的代码风格规范，养成规范的写代码习惯，减少不必要的错误和隐患，如果想在前端道路发展推荐选择，输入y回车
选择一个ESLint预设，编写vue项目时的代码风格，和上面一样，如果上面选择了，这个直接输入y回车
是否安装单元测试，个人推荐不需要
Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
none(configure it yourself)自己定义 个人推荐不需要

主要个人习惯，npm和yarn的区别，可以参考https://blog.csdn.net/weixin_34221276/article/details/87960839?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

1.如果使用npm可以安装cnpm代替，因为node安装插件是从国外服务器下载，受网络影响大，速度慢且可能出现异常。那么如果npm服务器在中国就好了，我们优秀的淘宝团队做了这件事，他们将每10分钟请求一次官方服务，最大化与官方服务同步，也就是说我们使用阿里布置在国内的服务器来进行node安装可大大提升工作效率

2.cnpm使用方法
使用阿里定制的 cnpm 命令行工具代替默认的 npm，输入下面代码进行安装：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2.检测cnpm版本，如果安装成功可以看到cnpm的基本信息。
cnpm -v
3.以后安装插件只需要使用cnpm intall即可

正常情况下，这样会直接生成项目，端口默认8080，常见报错是当前端口号被占用，需要更改端口，下面截图为更改位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mH2JZGz1-1583807341443)(/img/bVbEiK4)]

生成的项目目录

项目目录
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热加载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建配置公用工具相关
│ |-- vue-loader.conf.js // vue加载器
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- node_modules // 项目依赖的模块
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- router // 前端路由
| |-- App.vue // 页面入口文件（根组件）
| |-- main.js // 程序入口文件，加载各种公共组件（入口js文件）
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息

程序媛小白一枚，可能会存在遗漏的点，欢迎大佬们来分享交流呀~~