目前写过的大多数项目都是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版本

 

vue 选择 scss or less_css

 默认模式包含了babel用作语法转换以及eslint代码风格校验, 可以选择第二种,根据自己的项目需求去配置cli

 

vue 选择 scss or less_css_02

 用空格选择项,可以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 选择 scss or less_预处理_03

vue路由是否选择history模式,vue的路由有history和hash两种模式,默认hsah模式,链接后面会携带#/,选择n即默认hash模式;之后根据自己书写习惯选择css预处理器.

 

vue 选择 scss or less_预处理_04

选中css预处理器后,会进行代码风格校验的选择

 

vue 选择 scss or less_vue 选择 scss or less_05

 ESLint with error prevention only,  eslint仅在有错误时提醒;

其余三项为Airbnb风格,标准模式,美化模式,根据需要,一般选择standard模式就可以了.

 

vue 选择 scss or less_预处理_06

 Lint on save,在保存的时候进行语法检查。

Lint and fix on commit, 在提交的时候进行语法检查。

也可以全选.

 

vue 选择 scss or less_预处理_07

In dedicated config files 是单独存放;

In package.json是集成在package.json。

 

以上是cli的基本选择配置,其中有两个我没有勾选,一个是单元测试,另一个是E2E测试。其实我也并不了解,等学习到这里再研究吧.

单元测试:一个是karma+mocha+chai的方式,一个是jest

E2E测试,端到端测试。e2e测试主要是来测试页面的业务逻辑,主要注重用户体验,一个是nightwatch框架,另一个是Cypress框架

 

vue 选择 scss or less_css_08

 这个就是是否把选项作为将来的默认配置,这个如果每次需要大概一直就可以选Y

 

配置完成后就可以等待项目创建了,创建成功后,运行命令,进入文件夹,启动项目,

cd project-name // 进入文件夹
 npm run serve //启动项目

vue 选择 scss or less_预处理_09

 这样就可以在本地8080端口访问到创建的vue项目了.

在vscode中打开项目,大概长这个样子

vue 选择 scss or less_代码风格_10

 

 

一个vue项目的手脚架就大致搭建好了