zoukankan      html  css  js  c++  java

  • & 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;
   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 {
   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>
  • 相关阅读:
    iphone5刷机教程
    ios开发之--/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file
    浅谈iPhone OS(iOS)架构
    ios开发之--使用xib适配iPhone X
    ios开发之--armv7,armv7s,arm64,i386,x86_64详解
    ios开发之--UIButton中imageView和titleLabel的位置调整
    gem install cocoapods ERROR: While executing gem ... (Gem::FilePermissionError)
    ios开发之NSString用strong还是用copy？
    ios开发之--高德地图以及自定义大头针和气泡、导航
    iOS
  • 原文地址：https://www.cnblogs.com/doagain/p/14969041.html
Copyright © 2011-2022 走看看