一、开始

一）安装

  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 添加到路径中
  1. 安装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   #修改缓存位置
  1. 安装Vue-cli yarn global add @vue/cli
  2. 通过npm安装 npm install -g @vue/cli 需要把刚才设置的F:\node\npm_global添加到path中
  3. 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
  1. 如果安装了yarn选择通过npm 还是yarn创建（一定要设置淘宝镜像）
  2. 进入项目根目录 cd vue_test
  3. 运行项目 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 按需导入
  1. 配置axios
  • 选择【项目依赖】
  • 安装依赖，查找 axios ，要选择运行依赖
  1. 安装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>
    <input type="text" ref="username"
</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}
}
  1. 通过 <my-com></my-com> 进行使用

2、组件的全局注册

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

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

3、组件传值

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

4、组件的事件

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

三）插槽slot

1、普通插槽

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

2、具名插槽

  1. 在子组件中定义插槽指定name <slot name="head">默认插槽内容></slot>
  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
  1. 在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` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-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'}
  1. 在父路由中指定参数，通过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 ，要选择运行依赖
  1. 配置访问的根目录
//配置请求跟路径
axios.defaults.baseURL= 'http://localhost:5000'
  1. 配置request拦截，并加载进度条，设置数据提交的头部信息
// 在request拦截器中展示进度条NProgress.start()
axios.interceptors.request.use((config)=>{
	NProgress.start()
	config.headers.token=window.sessionStorage.getItem('token')
	return config
})
  1. 配置response拦截，关闭加载进度条
// 在response拦截器中隐藏进度条NProgress.done()
axios.interceptors.response.use(config =>{
  NProgress.done()
  return config
})
  1. 设置异步加载全局变量
// 设置全局变量，this.$http调用，（this.$http.post或者this.$http.get）
Vue.prototype.$http = axios