vue-cli

vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的。

安装：

Vue CLI需要Node.js 8.9或更高版本 (推荐10.0以上)。node环境安装后，直接通过npm install -g @vue/cli即可安装。安装完成后，输入vue --version，如果出现了版本号，说明已经下载完成。

用命令行创建项目：

1. 在指定路径下使用vue create [项目名称]创建项目。
2. 会让你选择要安装哪些包（默认是Babel和ESLint），也可以手动选择。
3. 如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org [项目名称]。
4. 如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到.npmrc，然后设置registry=https://registry.npm.taobao.org。

用界面创建项目：

1. 打开cmd，进入到你项目存储的路径下。然后执行vue ui，就会自动打开一个浏览器界面。
2. 按照指引进行选择，然后一顿下一步即可创建。

项目结构介绍：

1. node_modules：本地安装的包的文件夹。
2. public：项目出口文件。
3. src：项目源文件：
   • assets：资源文件，包括字体，图片等。
   • components：组件文件。
   • App.vue：入口组件。
   • main.js：webpack在打包的时候的入口文件。
4. babel.config.js：es*转低级js语言的配置文件。
5. package.json：项目包管理文件。

组件定义和导入：

1. 定义：组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到.vue的template标签中，所以不再需要在定义组件的时候传入template参数。另外，因为需要让别的组件使用本组件，因此需要用export default将组件对象进行导出。
2. 导入：因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用ES6语法的import XXX from XXX。

局部样式：

默认情况下在.vue文件中的样式一旦写了，那么会变成全局的。如果只是想要在当前的组件中起作用，那么可以在style中加上一个scoped属性即可。示例代码如下：

<style scoped>
.info{
   background-color: red;
}
</style>