一、开始
一)安装
-
安装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 添加到路径中
-
安装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 #修改缓存位置
-
安装Vue-cli
yarn global add @vue/cli
-
通过npm安装
npm install -g @vue/cli
需要把刚才设置的F:\node\npm_global添加到path中 -
vue -V
查看脚手架版本号
二)yarn 常用命令
yarn global add 包名 #全局安装包或模块
yarn remove 报名 #卸载移除包或模块
yarn (yarn install) #根据当前目录下的packgae.json文件配置自动下载安装包列表
yarn dev #启动一个http服务器运行前端项目
yarn init #自动构建前端项目
yarn publish #发布到官方包管理器中
三)创建项目
1、通过命令行创建(不推荐)
-
命令行切换到创建项目的文件夹
-
运行命令
vue create vue_test
创建应用程序vue_test -
选择vue的版本以及自定义安装,方向键选择,选择第3项目自定义安装
Progressive Web App (PWA) Support #单页面应用 Router #路由 Vuex #全局数据管理器 CSS Pre-processors #CSS sass 预解释器 Linter / Formatter
-
如果安装了yarn选择通过npm 还是yarn创建(一定要设置淘宝镜像)
-
进入项目根目录
cd vue_test
-
运行项目
npm run serve
2、通过图形界面创建
-
运行
vue ui
命令打开网页窗口 -
选择【创建】,修改项目存放的路径
-
项目文件夹中输入项目名称
-
选择系统预设的配置,这里选择【手动】
-
选择功能这里同命令模式。一般需要选择Babel、Route、Linter(建议不要选)、使用配置文件
-
对功能进行配置:vue版本,历史模式路由关闭(采用哈希模式),css选择sass,linter 选择standard,Lint on save打开(保存时进行校验)
-
是否把刚才的配置保存为新的预设
-
配置Element-UI组件库
- 打开项目仪表盘,选择插件
- 查找插件
vue-cli-plugin-element
- 配置插件:导入模式,默认是所有的插件导入,选择on demand 按需导入
-
配置axios
- 选择【项目依赖】
- 安装依赖,查找
axios
,要选择运行依赖
-
安装less相关依赖
- 注意要安装到开发依赖
- 查找less-loader 进行安装
- 注意还需要安装
less
二、项目目录结构与执行流程
一)项目的目录结构
- node_modules :项目依赖的包文件,可以通过执行
npm install
进行安装,本地开发的依赖库 - public : 项目的入口
- src\assets : 存放静态资源
- src\components :存放程序的一些组件
- src\store : 全局状态管理器,保存公共数据/公共变量
- src\views :页面组件,一个vue文件就是一个页面内容
- dist :编译后的发布代码
二)项目的执行流程
-
执行index.html
-
main.js
-
App.vue 进行路由
-
页面组件
-
具体组件
三)几个文件解释
- 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、组件的引用
-
import MyCom from “./components/MyCom.vue”
导入组件 -
在components中注入组件
export default{ components:{my-com:MyCom} }
-
通过
<my-com></my-com>
进行使用
2、组件的全局注册
前面的组件注册都是局部注册,可以在main.js中对组件进行全局注册。流程如下:
- import 引入组件,方法同上
- 通过
Vue.component("标签名",组件名)
的方式进行注册
3、组件传值
- 组件可以通过定义与data()同级的
props
列表对象,来自动组件的属性,实现传值操作。 props:["title"]
这里的title为组件的属性名称,相当于在组件data()内定义了一个为title的数据。父组件通过给title赋值从而实现给子组件传值的目的。
4、组件的事件
- 组件的事件实现子组件向父组件传值的目的。
- 在子组件中通过
this.$emit("事件名称",传递的数据)
定义在父组件中通过@事件名称
来调用子组件的事件,从而触发子组件定义的原生事件。 通过数据完成相应的数据传递。
三)插槽slot
1、普通插槽
- 组件可以通过props对象进行值的传递,通过slot可以实现模板内容的传递。
- 在子组件中通过
<slot></slot>
可以加载在父组件引用子组件标签中的HTML内容
2、具名插槽
- 在子组件中定义插槽指定name
<slot name="head">默认插槽内容></slot>
- 在父组件中通过
v-slot:插槽名称
指定插槽的名称,从而指定模板内容具体绑定到哪个插槽上 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中新增模块功能最主要的两个命令:
- export与export default均可用于导出常量、变量、函数、文件、模块等;
- 在一个文件或模块中,export、import可以有多个,但export default仅有一个;
- 通过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/
一)组件路由
-
导入组件
-
在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
-
在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
传参的方式会导致在刷新页面的时候,传递的值会丢失
-
在路由配置中定义好路由的名称。
{path:"/goods/add",component:GoodsAdd, name: 'MtainGoods'}
-
在父路由中指定参数,通过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()
}
四、建立全局文件
一)建立全局样式
- 在assets文件夹中建立全局样式
- 创建一个全局的css样式文件
- 在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 表示没有通过
六、异步接口访问封装
一)异步加载进度条
-
通过vue ui 运行vue脚手架ui界面
-
选择已有项目或者导入项目
-
选择依赖,在运行依赖中安装
nprogress
-
导入进度条以及进度条依赖的样式。
// 加载进度条 import NProgress from 'nprogress' // 进度条样式 import 'nprogress/nprogress.css'
二)异步接口设置
-
配置axios
- 选择【项目依赖】
- 安装依赖,查找
axios
,要选择运行依赖
-
配置访问的根目录
//配置请求跟路径 axios.defaults.baseURL= 'http://localhost:5000'
-
配置request拦截,并加载进度条,设置数据提交的头部信息
// 在request拦截器中展示进度条NProgress.start() axios.interceptors.request.use((config)=>{ NProgress.start() config.headers.token=window.sessionStorage.getItem('token') return config })
-
配置response拦截,关闭加载进度条
// 在response拦截器中隐藏进度条NProgress.done() axios.interceptors.response.use(config =>{ NProgress.done() return config })
-
设置异步加载全局变量
// 设置全局变量,this.$http调用,(this.$http.post或者this.$http.get) Vue.prototype.$http = axios