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
    

你可能感兴趣的:(前端开发,vue.js,前端,javascript)