Vue-Cli使用第一天

初步使用

1.配置vue.config.js文档

官方描述：vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
根据iview-admin中的vue.config.js来更改，注意baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath。
初步配置：vue cli的应用部署路径，webpack打包路径别名

const path = require('path')

const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },
  // 打包时不生成.map文件
  productionSourceMap: false
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  // devServer: {
  //   proxy: 'localhost:3000'
  // }
}

配置入口文件main.js

入口文件是为webpack打包使用，入口文件是webpack构建内部依赖图的起点。简单地说就是webpack会从main.js开始执行，导入打包各种依赖模块，最后会生成一个输出文件app.js，app.js中包含了页面所有需要的css，js函数。这也就是webpack的使用好处，它可以让页面的请求量减少，并且不会有未引用冗余的代码，也减少了请求文件大小。
生成app.js之后就会挂载到index.html中，这是由webpack的一个插件——html-webpack-plugin完成的。
在了解基本打包流程之后，就要实现自定义一个基础页面了，通过iview插件（新添加）来丰富网页的设计，也减少了对组件的编辑。

基本配置代码如下：

main.js文件：

import Vue from 'vue'
import App from './App.vue'
import iView from 'iview'
import router from './route'

import './index.less'

Vue.config.productionTip = false
Vue.use(iView)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

index.less文件：

@import '~iview/src/styles/index.less';

@menu-dark-title: #001529;
@menu-dark-active-bg: #000c17;
@layout-sider-background: #001529;

由于iview已经到了4.0，可以根据官方文档中升级方案，将iview改为view-design。

从main文件中可以知道，main实例化了一个Vue对象，对象中配置了route路由参数（新添加），并且渲染了id为app的dom，而渲染元素是从App.vue中来。

App.vue文件：

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

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

<style lang="less">
.size{
  width: 100%;
  height: 100%;
}
html,body{
  .size;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#app {
  .size;
}
</style>

router-view是为了更好的构建单页应用，根据不同地路由地址可以渲染不同的页面。

回到main.js文件，配置route路由，route/index.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'

Vue.use(Router)
const router = new Router({
  routes,
  mode: 'history'
})

export default router

routes.js文件：

export default [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: 'login - 登录',
      hideInMenu: true
    },
    component: () => import('@/view/login/login.vue')
  }
]

这时就将路由地址‘/login’和login.vue页面绑定了，后续添加新的地址和界面也是一样。

设计login.vue文件：

<style lang='less'>
    @import "./login.less";
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
          <p class="login-tip">输入任意用户名和密码即可a</p>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
// import { mapActions } from 'vuex'
export default {
  components: {
    LoginForm
  },
}
</script>

这里用到了一个登录表单组件login-form.vue：

<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  data () {
    return {
      form: {
        userName: 'super_admin',
        password: ''
      }
    }
  },
  computed: {
    rules () {
      return {
        userName: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password
          })
        }
      })
    }
  }
}
</script>

现在算是初步完成配置登陆界面，也大致了解了配置流程，确实会比普通的html，css，js三件一起写方便很多。

最终界面展示

posted @ 2020-07-31 15:15 辞树阅读(120) 评论(0) 收藏举报

刷新页面返回顶部

辞树

Vue-Cli使用第一天

初步使用

1.配置vue.config.js文档

公告