vue+Element项目开发入门

一、开始

一）安装

1. 安装node.js

   下载网址：https://nodejs.cn/download/

   node -v								#查看node版本
   npm -v								#查看npm版本，可以成功环境变量配置正确
   npm config set registry http://registry.npm.taobao.org     #设置npm为淘宝
   npm config get registry       # 查看npm配置的镜像源
   npm config get prefix 						   #查看全局安装位置
   npm config set prefix F:\node\npm_global		#修改全局安装位置
   npm config set cache  F:\node\npm_cache			#修改缓存位置
   npm config get cache						   #查看缓存位置
   set path=%path%;F:\node\npm_global\			     #node 添加到路径中
   

2. 安装yarn npm install -g yarn 全局安装

   yarn --version								#查看yarn的版本
   yarn global bin								#查看 yarn的bin安装位置
   yarn global dir								#查看yarn的全局安装位置
   yarn config set global-folder F:\node\yarn\global #修改全局安装位置和缓存位置
   yarn config set cache-folder F:\node\yarn\cache   #修改缓存位置
   

3. 安装Vue-cli yarn global add @vue/cli

4. 通过npm安装 npm install -g @vue/cli 需要把刚才设置的F:\node\npm_global添加到path中

5. vue -V 查看脚手架版本号

二）yarn 常用命令

yarn global add 包名       #全局安装包或模块
yarn remove 报名           #卸载移除包或模块
yarn  (yarn install)      #根据当前目录下的packgae.json文件配置自动下载安装包列表
yarn dev   				 #启动一个http服务器运行前端项目
yarn  init				 #自动构建前端项目
yarn publish			 #发布到官方包管理器中

三）创建项目

1、通过命令行创建（不推荐）

1. 命令行切换到创建项目的文件夹

2. 运行命令 vue create vue_test 创建应用程序vue_test

3. 选择vue的版本以及自定义安装，方向键选择，选择第3项目自定义安装

   Progressive Web App (PWA) Support	#单页面应用
   Router   #路由
   Vuex   #全局数据管理器
   CSS Pre-processors  #CSS sass  预解释器
   Linter / Formatter   
   

4. 如果安装了yarn选择通过npm 还是yarn创建（一定要设置淘宝镜像）

5. 进入项目根目录 cd vue_test

6. 运行项目 npm run serve

2、通过图形界面创建

1. 运行 vue ui 命令打开网页窗口

2. 选择【创建】，修改项目存放的路径

3. 项目文件夹中输入项目名称

4. 选择系统预设的配置，这里选择【手动】

5. 选择功能这里同命令模式。一般需要选择Babel、Route、Linter（建议不要选）、使用配置文件

6. 对功能进行配置：vue版本，历史模式路由关闭（采用哈希模式），css选择sass，linter 选择standard，Lint on save打开（保存时进行校验）

7. 是否把刚才的配置保存为新的预设

8. 配置Element-UI组件库

   • 打开项目仪表盘，选择插件
   • 查找插件 vue-cli-plugin-element
   • 配置插件：导入模式，默认是所有的插件导入，选择on demand 按需导入

9. 配置axios

   • 选择【项目依赖】
   • 安装依赖，查找 axios ，要选择运行依赖

10. 安装less相关依赖

    • 注意要安装到开发依赖
    • 查找less-loader 进行安装
    • 注意还需要安装 less

二、项目目录结构与执行流程

一）项目的目录结构

• node_modules ：项目依赖的包文件，可以通过执行npm install 进行安装，本地开发的依赖库
• public : 项目的入口
• src\assets ： 存放静态资源
• src\components ：存放程序的一些组件
• src\store ： 全局状态管理器，保存公共数据/公共变量
• src\views ：页面组件，一个vue文件就是一个页面内容
• dist ：编译后的发布代码

二）项目的执行流程

1. 执行index.html

2. main.js

3. App.vue 进行路由

4. 页面组件

5. 具体组件

三）几个文件解释

• main.js 核心文件导入了vue ，路由
• router.js 　进行路由配置
• app.vue 根组件

三、Vue的基础语法

一）模版引用

当在事件中需要对模板中template 定义的元素进行引用时的操作。即进行DOM操作，通过 this.$refs.name 可以获取到ref 为 name 的模版元素。

<template>
    template>
<script>
    ……
    methods:{
        getEcle(){
            this.$refs.contentDiv.innerHTML="改变div的文本"
            this.$refs.username.vaule="你好"   //给input赋值
        }
    }
script>

二）自定义组件

1、组件的引用

1. import MyCom from “./components/MyCom.vue” 导入组件

2. 在components中注入组件

   export default{
       components：{my-com：MyCom}
   }
   

3. 通过 进行使用

2、组件的全局注册

前面的组件注册都是局部注册，可以在main.js中对组件进行全局注册。流程如下：

1. import 引入组件，方法同上
2. 通过Vue.component("标签名"，组件名) 的方式进行注册

3、组件传值

• 组件可以通过定义与data()同级的props列表对象，来自动组件的属性，实现传值操作。
• props：["title"] 这里的title为组件的属性名称，相当于在组件data()内定义了一个为title的数据。父组件通过给title赋值从而实现给子组件传值的目的。

4、组件的事件

• 组件的事件实现子组件向父组件传值的目的。
• 在子组件中通过 this.$emit("事件名称",传递的数据) 定义在父组件中通过@事件名称 来调用子组件的事件，从而触发子组件定义的原生事件。 通过数据完成相应的数据传递。

三）插槽slot

1、普通插槽

• 组件可以通过props对象进行值的传递，通过slot可以实现模板内容的传递。
• 在子组件中通过 可以加载在父组件引用子组件标签中的HTML内容

2、具名插槽

1. 在子组件中定义插槽指定name 默认插槽内容>
2. 在父组件中通过v-slot:插槽名称指定插槽的名称，从而指定模板内容具体绑定到哪个插槽上
3. v-slot:插槽名称 可以简写成#插槽名称 的形式

四）全局变量的定义

可以通过Vue.prototype实现全局变量的定义。

1、基本示例

在main.js中添加一个变量到 Vue.prototype

Vue.prototype.$appName = 'My App'

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以，通过this. $appName使用这个全局变量

2、 property 的一个简单约定

$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

五）export的使用

export 与import是es6中新增模块功能最主要的两个命令：

1. export与export default均可用于导出常量、变量、函数、文件、模块等；
2. 在一个文件或模块中，export、import可以有多个，但export default仅有一个；
3. 通过export方式导出，在导入（import）时要加花括号{ }，export default则不需要花括号{ }。

1、分别暴露

应用场景：用于一个文件内暴露多个属性的场景，分别暴露，每一个属性都进行暴露

//暴露
export  const a =()=>{
    console.log(999);
} 
export  const b = 2
export  const c = 1 
//引入
import {a,b,c} from '@/api/api'
//使用：可直接通过a,b,c获取
created(){
    a()
    console.log(b,c);

2、统一暴露

应用场景：用于一个文件内暴露多个属性的场景，统一进行暴露

//暴露
const a =()=>{
    console.log(999);
} 
const b = 2
const c = 1 
export{a,b,c}
//引入
import {a,b,c} from '@/api/api'
//使用
created(){
    a()
    console.log(b,c);
  }

3、默认暴露

应用场景：对于只需要暴露一个属性的时候使用

//暴露
const a =(data)=>{
    return data+1
} 

export default a
//引入
import a from '@/api/api'

//使用
created(){
    console.log(a(5));
  }

三、路由设置

参考网址：https://router.vuejs.org/zh/guide/

一）组件路由

1. 导入组件

2. 在routes数组中添加字典 path :路由的路径 component ： 组件名称要和导入组件名称一致

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Login from "../components/Login.vue"
   
   Vue.use(VueRouter)
   
   const routes = [
     {path:"/", redirect:"/login"},
     { path:"/login",component:Login}
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router
   

3. 在app.vue 中注册路由配置

    
    <router-view>router-view>
   

二）路由重定向

在routes数组中添加字典 path ：“/”，redirect : “/login”

三）子路由

在路由中配置路由，形成页面的嵌套。

{ 
		path:"/home",
		component:home,
		redirect:"/welcome",
		children:[
			{path:"/welcome",component:welcome},
			{path:"/userlist",component:UserList},
			{path:"/catgory",component:Catgory},
			{path:"/goodslist",component:Goodslist},
			{path:"/goods/add",component:GoodsAdd, name: 'MtainGoods'},
			{path:"/order/list",component:Orderlist}
		]
  }

四）路由拦截

当访问没有需要登录的页面，这时就需要通过路由拦截进行实现。在路由配置中通过下面方法实现路由拦截。

//路由拦截
router.beforeEach((to,from,next)=>{
	//to 将要访问的页面
	//from 从哪个路径跳转而来
	//next 是个函数，表示放行  next('/login') 强制跳转到登录页
	if(to.path==='/login')  return next()
	const tokenstr=window.sessionStorage.getItem('token')
	if(!tokenstr) return next('/login')
	next()
})

五）路由跳转

1、router-link

我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

<div id="app">
  <h1>Hello App!h1>
  <p>
    
    
    
    <router-link to="/">Go to Homerouter-link>
    <router-link to="/about">Go to Aboutrouter-link>
  p>
  
  
  <router-view>router-view>
div>

2、router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

3、编程式导航

在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push，基本用法如下：

this.$router.push("/home")

六）路由传参

params传参，显示参数。这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失

1. 在路由配置中定义好路由的名称。

   {path:"/goods/add",component:GoodsAdd, name: 'MtainGoods'}
   

2. 在父路由中指定参数，通过name指定跳转的路由名称，实现跳转路径，通过query字典设置传递的参数

   this.$router.push({
       name:'MtainGoods',
       query:{id:123}
   })//传参跳转路由
   

3、在子路由中接收参数值，通过this.$route.query获取传递的参数值

if(this.$route.query.id){
    this.formbaseData.id=this.$route.query.id
    this.Isadd=false
    this.getGoodsinfo()
}

四、建立全局文件

一）建立全局样式

1. 在assets文件夹中建立全局样式
2. 创建一个全局的css样式文件
3. 在main.js中导入创建的全局样式文件。import "./assets/css/global.css"

二）字体图标

在main.js中导入字体图标的iconfont.css文件即可。

五、表单验证

一）注意事项

• 表单的数据通过 model属性设置，不是通过v-model绑定
• 表单组件v-model 的值要和prop 的值一致

二）验证时机

username:[
    {required:true,message: '请输入用户名', trigger: 'blur'},  /*, trigger指定触发时机,blur失去焦点验证 */
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
],

trigger 属性指定验证时机，blur 表示失去焦点验证 ，change 表示内部改变的过程中验证（这一点比uniapp好）

三）提交表单判断验证是否通过

submitForm(){
			this.$refs.form.validate((valid)=>{
				console.log(valid)
			})
		}

通过表单的validate方法中的回调函数的第一个参数返回状态，true 表示通过，false 表示没有通过

六、异步接口访问封装

一）异步加载进度条

1. 通过vue ui 运行vue脚手架ui界面

2. 选择已有项目或者导入项目

3. 选择依赖，在运行依赖中安装nprogress

4. 导入进度条以及进度条依赖的样式。

   // 加载进度条
   import NProgress from 'nprogress'
   // 进度条样式
   import 'nprogress/nprogress.css'
   

二）异步接口设置

1. 配置axios

   • 选择【项目依赖】
   • 安装依赖，查找 axios ，要选择运行依赖

2. 配置访问的根目录

   //配置请求跟路径
   axios.defaults.baseURL= 'http://localhost:5000'
   

3. 配置request拦截，并加载进度条，设置数据提交的头部信息

   // 在request拦截器中展示进度条NProgress.start()
   axios.interceptors.request.use((config)=>{
   	NProgress.start()
   	config.headers.token=window.sessionStorage.getItem('token')
   	return config
   })
   

4. 配置response拦截，关闭加载进度条

   // 在response拦截器中隐藏进度条NProgress.done()
   axios.interceptors.response.use(config =>{
     NProgress.done()
     return config
   })
   

5. 设置异步加载全局变量

   // 设置全局变量，this.$http调用，（this.$http.post或者this.$http.get）
   Vue.prototype.$http = axios