springboot + vue + iview 1.创建vue+iview项目 mac版

Z时代
2024-01-10
分类：综合

vue

以前已经安装过node.js，所以这次直接打开终端查看更新。

安装node

1.查看node版本

node -v

2.查看npm版本

npm -v

3.更新npm到最新版本

npm -g install npm

4.安装npm的国内镜像，这样之后就使用cnpm命令，因为是国内的镜像，所以下包的速度会变快。

npm install -g cnpm --registry=https://registry.npm.taobao.org

5.安装vue脚手架

cnpm install -g vue-cli

这样前期工作需要安装的东西就搞定了，接下来构建项目。

构建项目

1.随便找个地方创建个文件夹，我的起名为workspace-vue，以后vue的项目就都保存到这里了，然后从终端cd到这个目录下。

2.创建一个新项目，我给这个项目起名为 blog-vue

vue init webpack blog-vue

3.创建完项目之后，cd到项目目录下，安装依赖包

cnpm install

4.这样项目就创建好了，我们可以运行看一下效果了。

npm run dev

5.运行成功，检查效果，可以看到，终端里写着在项目在 http://localhost:8080 运行中，去浏览器输入地址，展示结果。

用webstorm打开项目，项目结构如下

6.为了可以执行axios发送请求，要在项目目录下安装axios，安装之前记得要停掉服务

cnpm install axios

想知道什么是axios？请点这里

编写页面

现在可以开始编写页面了，比如写一些通用的部分。我打算使用ivew的控件编辑页面，先去研究研究，之后继续写。

1.首先在项目目录下安装iview，命令可以再iview官网中找到。安装之前记得停掉服务

cnpm install iview --save

如果有遇到警告，可以重新安装了一下这个ajv

npm i ajv

2.有了组件之后，在main.js中加入三行代码，引用iview

import iView from 'iview'   //引入iview
import 'iview/dist/styles/iview.css'    //使用iview cssVue.use(iView); //使用iview组件

3.在components文件夹下建一个Login.vue，做一个测试，里面引用的直接可以在iview官网中找个表单的demo。

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        }
    }
</script>

4.更改App.vue

<template>
  <div id="app">
    <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>

5.改一下router下面的index.js，更改一下路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/hello',
      component: HelloWorld
    }
  ]
})