一、安装vue-cli

Mac系统：

sudo npm install -g vue-cli

检查是否安装好：

vue -V

二、创建新项目

1、打开Vue项目管理器

输入命令：

vue ui

但是没有任何反应，再输入检查，没有ui：

vue -h

经查询得知，需要升级vue脚手架：

cnpm i -g @vue/cli

再输入：

vue ui

参考文章：《【Bug解决】输入vue ui没有反应的原因和解决办法》

2、创建项目

1）第一步：

2）第二步：

3）第三步

4）第四步

5）第五步

3、添加插件

1）安装vuetify

2）安装axios

与后端进行交互与ajax

遇上同理。

4、运行项目

在aitest目录下运行命令：

npm run serve

 打开地址：http://localhost:8080

三、实战部分

1、vue router路由设计

1）首先新创建一个登录页面，SignIn.vue文件

2）再配置路由

3）修改App.vue

加上

<template>
  <v-app>

    

  v-app>
template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
script>

4）SignIn.vue文件编写前端代码

# 相当于Html
<template>
    <div class="login-form">
        <h1>登录h1>
        <v-text-field dense label="请输入用户名">v-text-field>
        <v-text-field dense label="请输入密码">v-text-field>
        <v-btn depressed color="primary">立即登录v-btn>
        <v-btn depressed color="primary" text>立即注册v-btn>
    div>
template>

# 相当于JS
<script>
export default {
    
}
script>

# 相当于CSS
<style lang="stylus" scoped>
    .login-form{
        width:600px;
        margin : 0 auto;
    }
style>

展示效果：

插件参考vuetify：https://vuetifyjs.com/zh-Hans/