Vue的基础知识，需掌握

最新推荐文章于 2024-06-15 21:47:49 发布

、、划水、、

最新推荐文章于 2024-06-15 21:47:49 发布

阅读量149

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/huashui996521/article/details/115917841

版权

一、Vue全家桶

vue全家桶都包括哪些 vue全家桶都有什么 vue全家桶详细介绍

vue全家桶都有什么

全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。

注：此文章主要讲解vue-cli脚手架开发方式，主要介绍各插件安装方法及其功能特点，不介绍各插件的具体使用方式，具体使用方式详见其他详细介绍文章。

vue.js,vue-router,vuex,axios,ES6,Sass/less/Stylus,…

1. vue.js:computed,过滤器，自定义指令，绑事件(@事件名)，绑属性(:属性名)，组件通讯（3种）…

2. vue-router:路由传参，路由守卫，嵌套路由，动态路由，路由懒加载…

3. vuex:集中管理组件状态,5个要素：`state,mutation,action,modules,getters`

二、Vue脚手架创建项目

1、安装脚手架

npm install -g @vue/cli

2、创建Vue项目

vue create 项目名

1、建议使用manually select eatures 手动安装

2、Eslint:代码质量检验工具

3、运行项目

npm run serve

 App running at:
  - Local:   http://localhost:8080/     //只能在本机运行
  - Network: http://172.18.1.33:8080/   //ip地址访问，可能通过手机直接访问

4、路由懒加载

router/index.js

//import Home from './home.vue'
import Home from './home.vue'

//路由懒加载
const Home=()=>import('./home.vue')

const routes=[
	{path:'/home',component:Home}
		

]

5、 vuex运行机制

三.Vue后台管理技术选型

1、技术栈：Vue,Element UI/iview ui/vant ui ,Axios,Sass,ES6

2、 B端和C端：

1、C端：customer,用户端，最终用户使用的，webApp,小程序，App,京东App，淘宝App

2、B端：business 后台管理-难度在于理解业务流程

3、后台管理启动

技术栈：vue,element ui,axios,sass

安装依赖

安装Element UI：vue add element

How do you want to import Element? Fully import   //全部安装还是按需安装
Do you wish to overwrite Element's SCSS variables? No   //不覆盖sass变量
Choose the locale you want to load zh-CN   //你使用的本地语言：zh-CN  中文

禁用ESlint:

项目根目录下创建vue.config.js

module.exports = {
lintOnSave:false
}

清理项目中无用的代码和文件

Login组件

布局问题

高度没有撑开

reset.css
html,body {
    height:100%;
}

app.vue
#app {
  height: 100%;
}

重置样式：https://meyerweb.com/eric/tools/css/reset/

添加Element 表单组件

给登录表单绑定数据：

第一步：给el-form添加model属性绑定表单数据对象
		  <el-form :model="loginForm"></el-form>
第二步：在data属性中添加数据对象
      export default {
        name: "login",
        data() {
            return {
                loginForm:{
                    username:'张三',
                    password:'123'
                }
            }
        }
      };
      
 第三步： 给具体的表单元素用v-model绑定
  			<el-form-item>
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>

用户名和密码的验证规则

第一步：给el-form添加rules属性绑定表单数据对象
		  <el-form :model="loginForm" :rules="validateRules"></el-form>
第二步：在data属性中添加数据对象
      export default {
        name: "login",
        data() {
            return {
               //验证表单规则
      validateRules: {
        username: [
            { required: true, message: "请输入用户名", trigger: "blur" },
            { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "change" },
            { min: 6, max: 25, message: "密码长度在 6到 25 个字符", trigger: "blur" },
          ],
        },
            }
        }
      };
      
 第三步： 给具体的表单元素用prop属性关联
 例如：
  		 <el-form-item prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>