vue-Cli 简单介绍

项目前导 学习笔记

一、vue-cli

1.1、介绍

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

1.2、安装

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

---

二、使用

2.1、用命令行创建项目

1. 在指定路径下使用 vue create [项目名称] 创建项目。

2. 会让你选择要安装哪些包（默认是 Babel 和 ESLint ），也可以手动选择。

3. 如果在安装的时候比较慢，可以在安装的时候使用淘宝的链接：vue create -r https://registry.npm.taobao.org [项目名称]。

4. 如果实在不想在创建项目的时候都指定淘宝链接，可以在当前用户目录下，找到 .npmrc，然后设置 registry=https://registry.npm.taobao.org。

2.2、用界面创建项目

1. 打开 cmd，进入到你项目存储的路径下。然后执行 vue ui，就会自动打开一个浏览器界面。

2. 按照指引进行选择，然后一顿下一步即可创建。

2.3、用界面创建项目

1. node_modules：本地安装的包的文件夹。

2. public：项目出口文件。

3. src：项目源文件：

   1. assets：资源文件，包括字体，图片等。
   2. components：组件文件。
   3. App.vue：入口组件。
   4. main.js：webpack 在打包的时候的入口文件。

4. babel.config.js：es* 转低级 js 语言的配置文件（就是为了向下兼容）。

5. package.json：项目包管理文件。

2.4、组件定义和导入

1. 定义： 组件定义跟之前的方式是一模一样的。只不过现在模板代码专门放到 .vue 的 template 标签中，所以不再需要在定义组件的时候传入 template 参数。另外，因为需要让别的组件使用本组件，因此需要用 export default 将组件对象进行导出。
   
   在 components 文件夹下创建文件 MyPage.vue 文件

	<template>
		<div class="mypage">
	        <h1>我的view</h1>
	        <p class="info">{{info}}</p>
	    </div>
	</template>
	
	
	<script>
		export default{
		    data: function(){
		        return {
		            info: "这是我的第一个组件页面"
		        }
		    }
		}
	</script>  
	
	
	<style>
		.info{
		    background-color: aquamarine;
		}
	</style>

2. 导入： 因为现在组件是在不同的文件中。所以如果需要引用，那么必须进行导入。用 ES6 语法的 import aaa from vue文件的路径 ，其中 aaa 是自己起的组件的别名。
   
   App.vue 文件

	<template>
		<div id="app">
		  <ABC></ABC>
		</div>
	</template>
	
	
	<script>
		import ABC from "./components/MyPage.vue"
		
		export default {
		  name: "app",
		  components: {
		    "ABC": ABC
		  }
		}
	</script>
	
	
	<style scoped>
		body{
		  font-size: 43px;
		}
	</style>

2.5、局部样式

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

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

2.6、使用 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 语法。

---

三、运行

        最后说一下怎么运行这个项目呢，当然不是直接打开 html 文件了。

1. 运行 cmd 中
2. 进入到项目文件夹 cd 文件路径
3. 开启服务 npm run server
4. 开启之后会返回两个链接，访问即可