目前写过的大多数项目都是cli搭建的, 拿一个简单的项目结构来详细说一下每个目录的作用.
首先创建一个项目需要安装cli, 命令行全局npm安装即可
npm install -g @vue/cli然后创建一个项目 cli2与cli3的命令是不同的 (project-name就是你的项目名称)
vue create project-name // vue-cli3
vue init webpack project-name //vue-cli2然后就会根据项目不同需要去配置项目,cli已经有4.0版本了,但是兼容性还是不太好,运行项目有时可能会出现报错,所以安装的时候可以指定安装3.x版本
默认模式包含了babel用作语法转换以及eslint代码风格校验, 可以选择第二种,根据自己的项目需求去配置cli
用空格选择项,可以a全选,i反选;
一般Babel是转换语法必选选项;
typescript根据项目需求,ts文件转换为js文件需要运行tsc js-name;
router, vue路由,通过控制父组件一个路由变量的值，来动态改变指向的组件;
vuex,状态管理器,当你的项目有多个地方需要用到同一个值的时候,可以用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新;
CSS Pre-processors, CSS预处理器,可以根据自己的编写习惯使用less或sass,stylus等编写,之后转为css文件;
Linter,语法检查器(eslint),可以选择代码风格校验;
Unit Testing, 单元测试;
E2E Testing, 端到端测试;
根据自己需要选择项之后,回车进入下一项
vue路由是否选择history模式,vue的路由有history和hash两种模式,默认hsah模式,链接后面会携带#/,选择n即默认hash模式;之后根据自己书写习惯选择css预处理器.
选中css预处理器后,会进行代码风格校验的选择
ESLint with error prevention only, eslint仅在有错误时提醒;
其余三项为Airbnb风格,标准模式,美化模式,根据需要,一般选择standard模式就可以了.
Lint on save，在保存的时候进行语法检查。
Lint and fix on commit, 在提交的时候进行语法检查。
也可以全选.
In dedicated config files 是单独存放;
In package.json是集成在package.json。
以上是cli的基本选择配置,其中有两个我没有勾选,一个是单元测试，另一个是E2E测试。其实我也并不了解,等学习到这里再研究吧.
单元测试:一个是karma+mocha+chai的方式，一个是jest
E2E测试，端到端测试。e2e测试主要是来测试页面的业务逻辑，主要注重用户体验,一个是nightwatch框架，另一个是Cypress框架
这个就是是否把选项作为将来的默认配置,这个如果每次需要大概一直就可以选Y
配置完成后就可以等待项目创建了,创建成功后,运行命令,进入文件夹,启动项目,
cd project-name // 进入文件夹
npm run serve //启动项目
这样就可以在本地8080端口访问到创建的vue项目了.
在vscode中打开项目,大概长这个样子
一个vue项目的手脚架就大致搭建好了
