一、开始
一）安装
-
安装node.js
下载网址：https://nodejs.cn/download/
bashnode -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全局安装bashyarn --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 常用命令
bash
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项目自定义安装
bashProgressive 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 的模版元素。
html
<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中注入组件
javascriptexport 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
JavaScript
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、分别暴露
应用场景：用于一个文件内暴露多个属性的场景，分别暴露，每一个属性都进行暴露
JavaScript
//暴露
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、统一暴露
应用场景：用于一个文件内暴露多个属性的场景，统一进行暴露
JavaScript
//暴露
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、默认暴露
应用场景：对于只需要暴露一个属性的时候使用
JavaScript
//暴露
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 ： 组件名称要和导入组件名称一致
javascriptimport 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 中注册路由配置
html<!-- 注册路由配置 --> <router-view></router-view>
二）路由重定向
在routes数组中添加字典 path ："/"，redirect : "/login"
三）子路由
在路由中配置路由，形成页面的嵌套。
javascript
{
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}
]
}四）路由拦截
当访问没有需要登录的页面，这时就需要通过路由拦截进行实现。在路由配置中通过下面方法实现路由拦截。
javascript
//路由拦截
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 的生成以及编码
html
<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，基本用法如下：
JavaScript
this.$router.push("/home")六）路由传参
params传参，显示参数。这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失
-
在路由配置中定义好路由的名称。
JavaScript{path:"/goods/add",component:GoodsAdd, name: 'MtainGoods'} -
在父路由中指定参数，通过name指定跳转的路由名称，实现跳转路径，通过query字典设置传递的参数
JavaScriptthis.$router.push({ name:'MtainGoods', query:{id:123} })//传参跳转路由
3、在子路由中接收参数值，通过this.$route.query获取传递的参数值
JavaScript
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 的值一致
二）验证时机
javascript
username:[
{required:true,message: '请输入用户名', trigger: 'blur'}, /*, trigger指定触发时机,blur失去焦点验证 */
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
],trigger 属性指定验证时机，blur 表示失去焦点验证 ，change 表示内部改变的过程中验证（这一点比uniapp好）
三）提交表单判断验证是否通过
javascript
submitForm(){
this.$refs.form.validate((valid)=>{
console.log(valid)
})
}通过表单的validate方法中的回调函数的第一个参数返回状态，true 表示通过，false 表示没有通过
六、异步接口访问封装
一）异步加载进度条
-
通过vue ui 运行vue脚手架ui界面
-
选择已有项目或者导入项目
-
选择依赖，在运行依赖中安装
nprogress -
导入进度条以及进度条依赖的样式。
JavaScript// 加载进度条 import NProgress from 'nprogress' // 进度条样式 import 'nprogress/nprogress.css'
二）异步接口设置
-
配置axios
- 选择【项目依赖】
- 安装依赖，查找
axios，要选择运行依赖
-
配置访问的根目录
javascript//配置请求跟路径 axios.defaults.baseURL= 'http://localhost:5000' -
配置request拦截，并加载进度条，设置数据提交的头部信息
JavaScript// 在request拦截器中展示进度条NProgress.start() axios.interceptors.request.use((config)=>{ NProgress.start() config.headers.token=window.sessionStorage.getItem('token') return config }) -
配置response拦截，关闭加载进度条
JavaScript// 在response拦截器中隐藏进度条NProgress.done() axios.interceptors.response.use(config =>{ NProgress.done() return config }) -
设置异步加载全局变量
JavaScript// 设置全局变量，this.$http调用，（this.$http.post或者this.$http.get） Vue.prototype.$http = axios