脚手架、vue-cli与@vue/cli概念辨析

脚手架

为减少重复性工作而做的重复性工作」的工具

例子

你要写一个项目0,源语言为ES6,用了sass, 后端是node.你每次完成一部分功能,你都要用把ES6编译到ES5、编译sass、压缩html文件。每次修改代码都要做的编译ES6、sass、压缩html这些就是重复性工作。
后来你知道了gulp, 然后你写了个gulp脚本,每次有代码改动,一句gulp build就帮你完成了上面说的这些重复性工作. 你写的gulp脚本就是为减少重复性工作而做的工作。你写完这个项目0之后,你又要写项目1,还是ES6、sass、后端node,还要完成之前的那些重复性工作. 这个时候你又为了这个项目写了一个类似gulp脚本。
后来你又写了项目2、项目3···,你每次都用相同的技术栈,每次的gulp脚本都大同小异,这时候你发现,写这么多gulp脚本也成了重复性工作. 这就是为减少重复性工作而做的重复性工作
脚手架就可以帮你减少这些为减少重复性工作而做的重复性工作. 脚手架一个命令,目录结构、gulp脚本、babel配置、空的测试文件都帮你搞好了. 直接写核心业务代码,不做重复性工作,这就是脚手架的作用。
当然一般不同的技术栈会有自己的目录结构、工作流程,所以很多前端框架比如vue、angular、 ember会有自己的脚手架工具(一般就叫XXX-cli). yeoman也可以根据不同的生成器(generator)成为不同项目的脚手架工具

vue的脚手架:vue-cli、@vue/cli

vue脚手架版本目前有2,3,4
查看脚手架版本号

vue -V

vue-cli

vue-cli是版本2.x的脚手架
安装方式:

npm install -g vue-cli
或
npm install -g vue-cli@版本号

创建项目

vue init webpack 项目名称


Project name:项目名称
Project description:项目描述
Author:作者
Vue build:打包方式(standalone和runtime),按回车选择默认的就好
Install vue-router?:是否安装路由?肯定是需要用到的,按 y 回车
Use ESLint to lint your code?:是否启用eslint代码检测规则?目前不需要,按 n 回车
Setup unit tests with Karma + Mocha?:是否进行单元测试?目前不需要,按 n 回车
Setup e2e tests with Nightwatch?:是否进行端对端测试?目前不需要,按 n 回车

配置完之后,输入命令cd demo进入我们的项目文件夹,输入命令code . 就能将项目在vscode编辑器里打开,最后输入命令npm run dev启动项目,最后在浏览器地址栏输入localhost:8080就可以访问项目了。

1、build:构建脚本目录
1)build.js ==> 生产环境构建脚本;

2)check-versions.js ==> 检查npm,node.js版本;

3)utils.js ==> 构建相关工具方法;

4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;

5)webpack.base.conf.js ==> webpack基本配置;

6)webpack.dev.conf.js ==> webpack开发环境配置;

7)webpack.prod.conf.js ==> webpack生产环境配置;
    
2、config:项目配置

1)dev.env.js ==> 开发环境变量;

2)index.js ==> 项目配置文件;

3)prod.env.js ==> 生产环境变量;
3、node_modules:npm 加载的项目依赖模块
4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
    2)components:组件目录,我们写的组件就放在这个目录里面;
    3)router:前端路由,我们需要配置的路由路径写在index.js里面;
    4)App.vue:根组件;
    5)main.js:入口js文件;
5、static:静态资源目录,如图片、字体等。不会被webpack构建
6、babelrc:babel编译参数
7、editorconfig:代码格式
8、gitignore:git上传需要忽略的文件配置
9、postcssrc.js:转换css的工具
10、index.html:首页入口文件,可以添加一些 meta 信息等、
11、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
12、README.md:项目的说明文档,markdown 格式

@vue/cli

@vue/cli是版本3以上的脚手架

npm install -g @vue/cli@版本号

创建项目

vue create project // project是项目名称

其他大同小异

@vue/cli3与vue-cli2的区别

@vue/cli3和vue-cli2的区别在于:

创建项目 vue create

启动项目 由npm run dev 改成 npm run serve

移除了配置文件目录 config 和 build 文件夹,如果需要自定义配置,需要自己新建vue.config.js文件

移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问,并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

安装项目时会自动下载node-model文件夹


Reference

  1. https://blog.csdn.net/tsite/article/details/54630367
  2. https://blog.csdn.net/qq_37635012/article/details/105522444
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值