Vue脚手架的初次了解/使用

vue脚手架（vue-cli）的使用

运行环境：vue、node.js，npm(管理node下载包的工具)，安装好前三个后才能安装vue-cli
流程：
1.安装vue（官网： https://cn.vuejs.org/v2/guide/）
2. 下载node.js （官网：https://nodejs.org/en/download/）
3. npm --> node集成了npm

非重点：命令行
		   	   npm config ls(查看npm下载的包的存放路径)
		   	   npm config get prefix(查看npm的全局路径是什么)
               npm config set prefix "自定义文件路径\nodejs_package\npm_modules" 修改存放包的路径
               npm config set cache "自定义文件路径\nodejs_package\npm_cache" 修改cache路径
               npm config set registry https://registry.npm.taobao.org  修改下载镜像(淘宝的)
               
               修改路径的目的：默认存放包路径是在C盘，当下载的包过多时，会占用C盘空间，硬盘大的无视即可
               修改下载镜像目的：默认是连国外的，下载速度慢
               //安装cnpm(淘宝镜像)
               //安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 
               //查看cnpm的版本 cnpm -v
               
在电脑环境变量中：此电脑[右键] --> 属性 -->  高级系统设置  --> 高级 --> 环境变量 --> 系统变量的新建
			   1.变量名：NODE_HOME  
			   2.变量值：自定义文件路径\nodejs_package(修改过路径的用新路径，不要用默认的)
			   3.%NODE_HOME%\npm_modules

4.使用npm安装vue脚手架（vue-cli）：npm install -g @vue/cli（这步出错请把电脑环境变量配置一下）

安装vue脚手架

1.在想创建项目的文件夹中，在文件路径栏中使用cmd进入命令行
2.使用命令创建项目：vue create 项目名
3.选Manually select features(自定义安装)
4.选择Babel和Router，取消Linter/Formatter ,空格选择与取消 ，回车下一步
5.,提示选择什么模式的路由,输入 n (表示选择hash模式)
6.选择In dedicated config files（将配置文件单独放置）
7.是否保存模板（保不保存都可以）
8.等待创建，创建好后可以使用命令：①cd 项目名(进入文件夹) ② npm run serve（开启项目）
9.访问http://localhost:8080/（使用vue脚手架创建项目完成）

vue脚手架创建的项目介绍

1. |— node_modules ：存放依赖包的目录
2. |— public ：静态资源管理目录
3. |— src ：组件源码目录(我们写的代码)
   3.1 |— assets ：存放静态图片资源(CSS也可以放在这里)
   3.2 |— components ：存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个 完整的项目
   3.3 |— router ：存放了项目路由文件
   3.4 |— views ：放置的为公共组件(主要还是各个主要页面)
   3.5 |— App.vue/app.vue ：可以当做是网站首页，是一个vue项目的主组件，页面入口文件
   3.6 |— main.js ：打包运行的入口文件，引入了vue模块和app.vue组件以及路由route
4. |— babel.config.js ：babel配置文件, 对源代码进行转码(把es6=>es5)
5. |— package.json ：项目及工具的依赖配置文件
6. |— paxkage-lock.json ：依赖配置文件
7. |— README.md ：项目说明

package.json介绍

1. 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
2. 使用npm install 命令是根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
3. 配置内容采用JSON格式,所有的内容都用双引号包裹
4. 不推荐直接在package.json中添加配置信息，因为package.json 主要是用来管理包的配置信息.为了方便维护,
   我们将Vue脚手架相关的配置单独定义到 vue.config.js 配置文件中

在项目的根目录创建文件 vue.config.js

module.exports = { 
	devServer:{ 
		open:true,  (打包完成自动打开浏览器)
		port:8889,  (访问端口)
	} 
}

vue组件化开发

组件可以理解成以前的html页面，在vue的开发环境中代替了html文件，成为了vue组件

1.组件级别

页面级别的组件：通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
基础组件：通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目录下，然后通过import在各个页面中使用

2.组件的必带三大部分

template：html部分
script：js部分（使用ES6语法编写）
style：css部分

3.vue项目的运行流程

1. 项目运行会先加载入口文件：src/main.js
2. 加载页面入口文件：src/App.vue
3. 加载路由文件：src/router/index.js
4. 打开默认页面：src/view/Home.vue -->Home.vue会调用src/components/HellowWord.vue

改造脚手架创建的项目并自定义组件运行

1. 删除components 目录下的 HelloWord.vue组件
2. 删除App.vue中的部分内容,只保留如下部分

<template> 
	<div id="app"></div> 
</template> 

<style> 
</style>

3. 删除router文件下的路由文件 index.js部分内容,只保留如下部分

import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter) ;
const routes = [ ]
const router = new VueRouter({ 
	routes 
});
export default router;

4. 删除views目录下的 About.vue 与 Home.vue
5. 在components文件夹中创建vue组件
6. 修改项目根目录下的App.vue，如下部分

<template>
	<!-- 根据访问的路径,渲染路径匹配到的视图组件 -->
    <router-view/>
</template>

<style></style>

7. 在router的index.js中配置路由
   7.1把创建好的vue进行import到index文件中
   7.2在routes常量中用相同格式进行配置

import Login from "@/components/Login";//components文件夹下vue组件的名字
const routes = [
	{
		path:"/login",//访问路径
		name:"login",//路由名字
		component:Login,//对应import进来的名字
	}
];

8. 在vscode的文件夹目录下右键 --> 在集成终端打开 --> 输入npm run serve启动项目
9. http://localhost:8088/#/Login

Element-UI

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
Element-UI官方站点：https://element.eleme.cn/#/zh-CN

用法

1. 在集成终端打开 --> npm i element-ui -S
2. 打开 main.js , 导入Element-UI 相关资源

//导入组件库 
import ElementUI from 'element-ui'

//导入组件相关样式 
import 'element-ui/lib/theme-chalk/index.css' 

//配置Vue插件 将El安装到Vue上 
Vue.use(ElementUI);

3. 安装axios（作用：发起异步请求）：在集成终端打开 --> npm i axios
   3.1 在main.js文件中导入axios 相关资源

//引入axios 
import axios from 'axios' 

//Vue对象使用axios 
Vue.prototype.axios = axios;