cli (别名:脚手架 (官网并不支持))
作用(- 快速构建vue项目,底层配置使用的就是webpack)
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过 @vue/cli 搭建交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
- 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject
vue-cli3官网帮我们概述了vue-cli3的一些特点。个人在使用vue-cli3的感受中 零配置、可升级 2个特点确实很不错。
如何安装vue-cli3呢?
- 首先,你要有一个nodejs环境
- Node 版本要求
- Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
- 其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作
- 关于旧版本
- Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
版本
cli2 cli3
安装
npm优先级小于cnpm小于yarn
npm install @vue/cli -g (cli3的版本)
npm install vue-cli -g (cli2的版本)
yarn add @vue/cli global
-
注意:同一台电脑,不兼容两个版本
-
调节工具
npm install @vue/cli-init -g
yarn add @vue/cli-init global
cli3安装
$ vue
$ vue -v(查询版本)
$ vue create (.目录名) 创建一个文件
$ yarn serve
√ ( Babel)优雅降级
√(CSS pre-processors)css预处理语言
-
选择你的项目中的webpack的一些配置项
-
babel
-
css-pre
less
sass
stylus -
上面所选的配置是往 In dedicated config files(生成的单独的配置性文件)
还是往 package.json放,建议使用第一个
目录基本介绍
- node_modules 项目的依赖包
- public 静态资源文件夹
- favicon.ico 浏览器标题的图标
- index.html 它是整个项目的入口文件(根实例)的模板
- src 源代码开发目录
- assets 当前项目开发的静态资源
- js
- css
- img
- components 项目的组件
- xxx.vue 一个.vue的文件, 它就是一个组件, 也是一个模块
- App.vue 入口的主组件
- main.js webpack中配置的主入口文件
- .browserslistrc 项目不支持 ie8及以下的
- .gitignore git上传时, 不上传的文件
- babel.config.js es6->es5 优雅降级
- package.json 当前项目的依赖包配置文件
- postcss.config.js 给css添加引擎头前缀
- readme.md 当前项目的说明文件
- yarn.lock 当前项目的依赖包的第三方库的详细信息记录
安装cli2
vue init webpack/webpack-simple app
2.进行问题的选择
- 不安装单元测试
- 不安装e2e的测试
- eslint自愿
** 安装 cli2简易版本 **
vue init webpack-simple cli2_simple
总结
市面上可以见到4个版本
-
cli2
-
cli2简化版本
-
cli3独立性的配置型文件版本
-
cli3 package.json配置是独立在外的
-
cli2 vs cli3
-
cli2的webpack 配置是独立在外的
-
cli3的webpack 配置是放在了node_modules中,不建议我们修改原配置文件,要进行.覆盖文件的配置,配置vue.config.js
界面化安装cli3(不推荐)
命令行输入
$ vue ui
介绍cli3具体内容
- .vue的文件 -----》单文件组件
- 单文件组件由三部分组成
- template 模板(必写)
- script
- style
详细安装cli3教程
假设你已有了nodejs环境,你可以通过下面指令安装vue-cli3的包
npm install -g @vue/cli
OR
yarn global add @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。(例如 vue --version)接下来就是创建一个vue的项目了,使用下面命令:
vue create hello-world
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
在多选时,空格代表选中,enter代表进入下一个配置项
且你手动选择的配置项还会存入到你电脑的 ~/.vuerc 文件中,这样子你下次创建vue项目的时候,可以选择你之前手动配置的配置
上面的配置选择完之后,一个简单的vue项目就创建成功了。
这个时候你在命令行
cd 文件名
进入到hello-world项目根路径下,命令行敲下
npm run serve
项目就开始跑起来啦。
再讲一下创建项目后的 目录层次吧,接图:
一个一个来:
-
public目录放置ico以及你的index.html。这个目录博主我没加过其他文件,让它自己生成即可。
-
src这个目录不得了了,这个是我们开发vue项目的重点目录所在。
-
assets目录:
放置静态文件,例如:图片,js,svg的js等等啊,这个目录下的文件在生产环境下会被webpack copy -
components目录:放置公用vue组件页面
-
styles目录:博主新增,放置重写reset.css以及阿里矢量图字体iconfont.css用
-
views目录:博主用作放大模块。登录页,首页,注册页等等。
-
不知有没有发现博主比你们多了一个vue.config.js文件,这个文件更不得了啦。我们前端独立开发有个跨域问题,之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢?
// vue.config.js
module.exports = {
// 选项...
baseUrl:"./",
outputDir:"dist",
assetsDir:"assets",
indexPath:"index.html",
filenameHashing:true,
pages:undefined,
lintOnSave:true,
runtimeCompiler:false,
transpileDependencies:[],
productionSourceMap:false,
crossorigin:undefined,
integrity:false,
devServer:{//代理
port:8080,
proxy:'http://10.31.157.32:8081'
}
}