Loading

& VUE 学习记录(极速入门)-狂神

 

第一个vue-cli项目

什么是vue-cli

vue-cli是官方提供的一个脚手架,用于快速生成一个vue的项目模板；

预先定义好的目录结构及基础代码，就好比我们在创建maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

主要功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

vue-cli需要的环境

  • Node.js
  • Git

确认nodejs安装成功：

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！

安装Node.js淘宝镜像加速器(cnpm)
提升下载速度~

# -g 就是全局安装
npn install cnpm -g

安装vue-cli

cnpm install vue-cli -g

测试是否安装成功：查看可以基于那些模板来创建vue应用 vue list

image-20210327142018672

创建项目

vue init webpack myvue

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

image-20210327142500751

webpack打包

安装并测试

npm install webpack -g
npm install webpack-cli -g

webpack -v
webpack-cli -v

webpack的配置文件属性

  • entry：入口文件，指定webpack用哪个文件作为项目的入口
  • output：输出，指定webpack把处理完成的文件放置到指定路径
  • module：模块，用于处理各种类型的文件
  • plugins：插件，如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听，用于设置文件改动后自动打包

简单使用webpack

  1. 创建一个文件夹webpack-study 并使用webStorm open该文件夹

    image-20210327150452340

  2. 创建一个名为modules的目录，用于放置JS模块等资源文件
  3. 在modules目录下创建模块文件，如hello.js，用户编写JS模块相关代码

    image-20210327150706433

    //暴露一个方法
exports.sayHi = function () {
   document.write("<h1>lhxlhxlhx</h1>")
}
  4. 在modules目录下创建一个名为main.js的入口文件，用于打包时设置entry属性
    var hello = require("./hello");
hello.sayHi();
  5. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
    module.exports = {
   entry: './modules/main.js',
   output: {
       filename: "./js/bundle.js"
   }
}
  6. 在项目目录下创建HTML页面index.html，导入webpack打包后的JS文件
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
  7. 在webstorm控制台直接执行webpack

    image-20210327151238932

  8. 可以发现项目中多了一个dist的文件夹，此时运行index.html看效果

    image-20210327151411600

说明

# 参数 --watch用于监听变化(类似热部署)
webpack --watch

vue-router路由

image-20210327195735554

说明

Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue.js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5历史模式或hash模式，在IE9中自动降级
  • 自定义的滚动条模式

安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在vue-router

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装

npm install vue-router --save-dev

如果在一个模块化的工程中使用它，必须通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

  1. 先删除没有用的东西
  2. components目录下存放我们自己编写的组件
  3. 定义一个Content.vue的组件
<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

安装路由,在src目录下,新建一个文件夹router 专门存放路由

import Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      name: 'content',
      //跳转的组件
      component: Content
    },
    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main
    }
  ]
})

在main.js中配置路由

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置

//关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中使用路由

<template>
  <div id="app">
    <h1>lhx1</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试

image-20210327200215069

vue+elementUI

  • 创建工程 hello-vue vue init webpack hello-vue
  • 安装依赖
    • 进入工程目录 cd hello-vue
    • 安装vue-router npm install vue-router --save-dev
    • 安装 element-ui npm i element-ui -S
    • 安装依赖npm install
    • 安装SASS加载器cnpm install sass-loader node-sass --save-dev
    • 启动测试npm run dev
    • 具体代码请看路由嵌套

npm命令解释

npm install moduleName: 安装模块到项目目录下

npm install -g moduleName: -g 的意思是将模块安装到全局，具体安装到磁盘那个位置，要看npm config prefix的位置

npm install --save moduleName: -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

npm install --save-dev moduleName: --save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

路由嵌套

路由嵌套其实就是路由配置中的children属性

用WebStorm打开hello-vue

image-20210328122138003

修改main.js 导入elelment-ui

import Vue from 'vue'
import App from './App'

import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
})

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Login.vue

<template>
  <div>
    <el-card class="box-card">
      <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="username">
          <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      //表单验证，需要再el-form-item 元素中增加prop属性
      rules: {
        username: [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      },
      //对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用 vue-router路由到指定页面，该方式称之为编程式导航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
    handleClose: function () {
      console.log("Handle Close，空函数");
    }
  }
}
</script>


<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}

.box-card {
  width: 480px;
  margin: auto;
}
</style>

Profile.vue

<template>
  <h1>个人信息</h1>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>

List.vue

<template>
  <h1>用户列表</h1>
</template>

<script>
export default {
  name: "List"
}
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import Login from "../views/Login";
import Main from "../views/Main";
import List from "../views/user/List";
import Profile from "../views/user/Profile";

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/login',
      //跳转的组件
      component: Login
    },
    {
      //路由路径
      path: '/main',
      //跳转的组件
      component: Main,//嵌套路由
      children: [
        {path: '/user/profile',component: Profile},
        {path: '/user/list',component: List}
      ]
    }
  ]
})

参数传递及重定向

  • 方式一
    // 传递 
<!--name-传组件名 params传递参数，需要对象： v-bind-->
<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>


// 接收
import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
routes: [
  {
    path: '/main',
    component: Main,
    children: [ // 嵌套路由
      {path: '/user/profile:id', name: 'UserProfile', component: UserProfile},
      {path: '/user/list', component: UserList},
      {path: '/user/telephone', component: Telephone}
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
})

// 展示
<template>
<div>
  <h1>个人信息</h1>
  {{$route.params.id}}
</div>
</template>

<script>
export default {
name: "UserProfile"
}
</script>

<style scoped>

</style>
  • 方式二
    // 设置props
import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
routes: [
  {
    path: '/main',
    component: Main,
    children: [ // 嵌套路由
      {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
      {path: '/user/list', component: UserList},
      {path: '/user/telephone', component: Telephone}
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
})

// 绑定id
<template>
<div>
  <h1>个人信息</h1>
  {{$route.params.id}} 

  {{id}}
</div>
</template>

<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>

<style scoped>

</style>
  • 重定向
    import Vue from 'vue'
import VueRouter from "vue-router"

import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'

Vue.use(VueRouter)

export default new VueRouter({
routes: [
  {
    path: '/main',
    component: Main,
    children: [ // 嵌套路由
      {path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
      {path: '/user/list', component: UserList},
      {path: '/user/telephone', component: Telephone}
    ]
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/goHome',
    redirect: '/main'
  }
]
})

路由模式和404

使页面路径不带#

export default new VueRouter({
  mode: 'history', // 不带#
})

安装并使用axios

npm install --save axios vue-axios

将下面代码加入入口文件:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

路由钩子

image-20210328124058386

<template>
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}<br/>
    {{id}}
  </div>
</template>

<script>
export default {
  props: ['id'],
  name: "UserProfile",
  beforeRouteEnter: (to, from, next)=>{
    console.log("进入钩子之前");
    next(vm => {
      vm.getData();  // 进入路由之前，执行我们自定义的getData方法
    });
  },
  beforeRouteLeave: (to, from, next)=>{
    console.log("离开钩子之前")
    next();
  },
  methods: {
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/data.json'
      }).then(function (response) {
        console.log(response)
      });
    }
  }
}
</script>

<style scoped>

</style>
posted @ 2021-07-04 15:18  yescctv6  阅读(122)  评论(0)  编辑  收藏  举报