vue-cli

vue-cli

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

安装

Vue CLI需要Node.js 8.9或更高版本 (推荐8.11.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. 按照指引进行选择，然后一顿下一步即可创建。

项目结构介绍

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

组件定义和导入

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

局部样式

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

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

使用sass语法

很多小伙伴在写样式代码的时候，不喜欢用原生css，比较喜欢用比如sass或者less，这里我们以sass为例，我们可以通过以下两个步骤来实现：

1. 安装loader：webpack在解析scss文件的时候，会去加载sass-loader以及node-loader，因此我们首先需要通过npm来安装一下：

npm install node-sass@4.12.0 --save-dev
npm install sass-loader@7.0.3 --save-dev

2. 指定sass语言：在指定style的时候，添加lang="scss"属性，这样就会将style中的代码识别为scss语法。