Vue CLI
- 1、Vue CLI简介
- 2、Vue CLI的安装
- 3、创建项目
- 3.1、使用vue create命令
- 3.2、使用图形界面
- 4、项目结构
- 4.1、App.vue文件
- 4.2、main.js文件
- 4.3、index.html文件
- 5、编写一个单文件组件
在开发大型项目时，需要考虑项目的组织结构、项目构建和部署等问题。如果手动完成这些配置工作，工作效率会非常低。为此，Vue.js官方提供了一款脚手架生成工具Vue CLI，通过该工具可以快速构建项目，并实现一些项目的初始配置。
1、Vue CLI简介
Vue CLI是一个基于Vue.js进行快速开发的完整系统。新版本的Vue CLI的包名由原来的vue-cli改成了@vue/cli。
Vue CLI有几个独立的部分，下面分别进行介绍。
CLI
CLI是全局安装的npm包，提供了一些vue命令。通过vuecreate命令可以快速搭建一个新项目，通过vue serve命令可以构建新想法的原型，通过vue ui命令可以使用图形化界面来管理项目。CLI服务
CLI服务(@vue/cli-service)是一个开发环境依赖，它是一个npm包，本地安装在@vue/cli创建的每个项目中。CLI服务构建于webpack和webpack-dev-server之上，包含以下内容：- 加载其他CLI插件的核心服务。
- 一个为绝大部分应用优化过的内部webpack配置。
- 项目内部的vue-cli-service命令，提供serve、build和inspect命令。
CLI插件
CLI插件是向Vue项目提供可选功能的npm包。在项目内部运行vue-cli-service命令时，它会自动解析并加载package.json文件中列出的所有CLI插件。CLI插件可以作为项目创建过程的一部分，也可以后期加入项目中。
2、Vue CLI的安装
Vue CLI是应用node编写的命令行工具，需要进行全局安装。如果想安装它的最新版本，需要在命令提示符窗口中输入如下命令：
npminstall-g@vue/cli如果想安装@vue/cli的指定版本，可以在上述命令的最后添加“@”符号，在“@”符号后添加要安装的版本号。例如，要安装@vue/cli 5.0.6版本，输入如下命令：
npm install -g @vue/cli@5.0.6
安装完成之后，可以在命令行中执行如下命令来检查版本是否正确，并验证Vue CLI是否安装成功：
vue--version如果在窗口中显示了Vue CLI的版本号，则表示安装成功。
3、创建项目
使用Vue CLI创建项目有两种方式，一种是使用vuecreate命令进行创建，另一种是通过vue ui命令启动图形界面进行创建。
3.1、使用vue create命令
在命令提示符窗口中，选择好项目的存储目录。使用vuecreate命令创建一个名称是myapp的项目，输入如下命令：
vue create myapp执行命令后，会提示选择一个preset（预设）。一共有3个选项，前两个选项是默认设置，适合快速创建一个项目的原型。第3个选项“Manually select features”需要手动对项目进行配置。这里使用方向键↓选择“Manually select features”选项，如图所示。
按Enter键，此时会显示项目的配置选项。这些配置选项的说明如表所示。
| 选项 | 说明 |
|---|---|
Babel | 转码器，用于将ES6代码转换为ES5代码 |
TypeScript | 微软开发的开源编程语言，编译出来的JavaScript可用于任何浏览器 |
Progressive Web App(PWA) Support | 支持渐进式Web应用程序 |
Router | 路由管理 |
Vuex | Vue的状态管理器 |
CSS Pre-processors | CSS预处理器（如Less） |
Linter / Formatter | 代码风格检查和格式校验 |
Unit Testing | 单元测试 |
E2E Testing | 端到端测试 |
通过键盘中的上下方向键进行移动，应用空格键进行选择，这里保持默认的Babel和Linter /Formatter的选中状态，如图所示。
按Enter键，此时会提示选择项目中使用的Vue的版本，这里选择默认的3.x版本，如图所示。
按Enter键，此时会提示选择代码格式和校验选项的配置。第一个选项是指ESLint仅用于错误预防，后三个选项是选择ESLint和哪一种代码规范一起使用。这里选择默认选项，如图所示。
按Enter键，此时会提示选择代码检测方式，这里选择默认选项“Lint on save”（保存时检测），如图所示。
按Enter键，此时会提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息，第二个选项是将配置信息存储在package.json文件中。这里选择第一个选项，如图所示。
按Enter键，此时会询问是否保存当前的配置。如果选择了保存，以后再创建项目时，就会出现保存过的配置，直接选择该配置即可。输入y表示保存，如图所示。
按Enter键，此时会提示为当前配置定义一个名字，如图所示。
输入名字后按Enter键开始选择使用包管理器，yarn或npm，这里选择npm。
按Enter键开始创建项目。创建完成后的效果如图所示。
根据提示在命令提示符窗口中输入命令cd myapp切换到项目目录，然后输入命令npm run serve运行项目。项目运行后，在浏览器中访问http://localhost:8080/，生成的页面如图所示。
要终止项目的运行，在命令提示符窗口中按Ctrl+C组合键即可。
接下来做一个简单的修改。打开src/App.vue文件，将传递给组件的msg属性的值修改为“快使用Vue CLI构建你的项目吧”，代码如下：
<template><imgalt="Vue logo"src="./assets/logo.png"><HelloWorldmsg="快使用Vue CLI构建你的项目吧"/></template><script>importHelloWorldfrom'./components/HelloWorld.vue'exportdefault{name:'App',components:{HelloWorld}}</script><style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>保存文件后，浏览器会自动刷新页面，结果如图所示。
在应用Vue CLI脚手架创建项目之后，可以根据实际的需求对项目中的文件进行修改，从而构建比较复杂的应用。
3.2、使用图形界面
使用图形界面创建项目需要使用vue ui命令。在命令提示符窗口中输入vue ui命令，按Enter键后，会在浏览器窗口中打开创建Vue项目的图形界面管理程序。在管理程序中可以创建新项目、管理项目、配置插件和执行任务等。通过图形界面创建新项目的界面如图所示。
左上角选择项目管理器->新建项目：
根据图形界面中的提示，就可以分步完成项目的创建。
4、项目结构
前面通过Vue CLI创建的项目在创建完成后，在当前目录下会自动生成项目文件夹myapp。项目目录结构如图所示。
下面对几个关键的文件代码进行解析，包括src文件夹下的App.vue文件和main.js文件、public文件夹下的index.html文件。
4.1、App.vue文件
该文件是一个单文件组件，在文件中包含了模板代码、组件代码和CSS样式规则。代码如下：
<template><imgalt="Vue logo"src="./assets/logo.png"><HelloWorldmsg="快使用Vue CLI构建你的项目吧"/></template><script>importHelloWorldfrom'./components/HelloWorld.vue'exportdefault{name:'App',components:{HelloWorld}}</script><style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>在上述代码中，使用import语句引入了HelloWorld组件，并且在<template>元素中使用了该组件。
App组件是项目的根组件。在实际开发中，可以修改代码中的import语句，将引入的组件替换为其他组件即可。
4.2、main.js文件
该文件是程序入口的JavaScript文件，主要用于加载公共组件和项目需要用到的各种插件，并创建Vue的根实例。代码如下：
import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).mount('#app')在上述代码中，使用import语句引入createApp。与HTML文件中使用<script>标签引入Vue的js文件不同，使用Vue CLI创建的项目，引入模块都采用这种方式。
4.3、index.html文件
该文件为项目的主文件，文件中有一个id属性值为app的div元素，组件实例会自动挂载到该元素上。代码如下：
<!DOCTYPEhtml><htmllang=""><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="icon"href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><divid="app"></div><!-- built files will be auto injected --></body></html>5、编写一个单文件组件
将一个组件的HTML、JavaScript和CSS应用各自的标签写在一个文件中，这样的文件即为单文件组件。单文件组件是Vue自定义的一种文件，以.vue作为文件的扩展名。
下面以之前创建的项目myapp为基础，通过一个实例来说明如何在应用中使用单文件组件。
示例：输出电影信息。
在项目中使用单文件组件定义电影信息，包括电影图片、电影名称和电影简介。具体步骤如下。
在src/assets文件夹下新建images文件夹，并存入一张图片ald.jpg。
在src/components文件夹下创建MyMovie.vue文件，代码如下：
<template><div><img:src="imgUrl"><divclass="movie_name1">电影名称：{{name}}</div><divclass="movie_des1">电影简介：{{ intro }}</div></div></template><script>exportdefault{data(){return{imgUrl:require('@/assets/images/ald.jpg'),name:'阿拉丁',intro:'超越原版动画的真人电影'}}}</script><stylescopedlang="scss">body{font-family:微软雅黑;}img{width:30px;}.movie_name{padding-left:10px;font-style:18px;color:#333;margin-top:8px;}.movie_des{padding-left:10px;font-style:14px;margin-top:5px;}</style>在默认情况下，单文件组件中的CSS样式是全局样式。如果需要使CSS样式仅在当前组件中生效，需要设置<style>标签的scoped属性。
- 打开App.vue文件，将HelloWorld组件替换为MyMovie组件。修改后的代码如下：
<template><MyMovie></MyMovie></template><script>importMyMoviefrom'./components/MyMovie.vue';exportdefault{name:'App',components:{MyMovie}}</script>import语句中的“@”表示src目录，该字符可以简化路径。引入的MyMovie组件可以不写扩展名.vue，因为项目内置的webpack可以自动添加扩展名.vue。
运行项目，在浏览器中访问http://localhost:8080/，输出结果如图所示。
