Vue脚手架

一、vue-cli脚手架介绍

“脚手架”，可以方便我们快速的创建项目，自动化地为我们搭建一个项目框架

• vue-cli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能
• vue-cli背后集成了现代化开发的诸多功能，通过简单的命令就可以完成 “零配置”的项目环境搭建

二、安装脚手架（vue-cli）

• 在安装vue-cli前，要确认自己的电脑是否安装了nodejs和npm,安装了node.js菜鸟使用npm ，才能安装vue-cli

• node -v 验证 是否安装nodejs

• npm -v 验证是否安装npm(npm是安装nodejs自带的包管理工具)

• vue -V 验证是否安装脚手架（注意-V是大写字母，这不是查看vue的版本这是脚手架的版本）

  如果提示 vue是内部或外部命令则需要重新安装脚手架

  安装vue

  npm install -g vue

  卸载脚手架

  npm uninstall vue-cli -g

  重新安装脚手架

  npm install -g @vue/cli

  再查看vue-cli版本

  vue -V

三、命令行使用脚手架创建项目

cmd： vue create 项目名称

根据交互提示选择

idea打开刚刚创建的项目即可

默认使用脚手架创建项目很慢，切换淘宝的会快很多

查看当前使用镜像地址：

npm config get registry

设置为淘宝镜像源：

npm config set registry http://registry.npm.taobao.org/

四、Idea使用vue.js插件创建项目

1、idea安装vue.js

2、idea采用脚手架创建vue项目

五、脚手架项目骨架介绍

启动项目以及项目打包

浏览器访问

六、HelloWorld.vue文件解析

<!--标签 负责结构-->
<template>
{{name}}
</template>

<!--js脚本负责动态数据-->
<script>
export default {
  data(){
    return{
      name: "HomeView"
    }
  }
}
</script>
<!--css样式负责结构外观-->
<style scoped>

</style>

七、导入常用模块

1、 axios模块导入

安装： npm install axios@1.3.2 无版本号则最新

卸载： npm uninstall axios 卸载不需要版本号

2、element-ui模块导入

element-ui 官网：https://element.eleme.cn/#/zh-CN/component/installation

npm install element-ui@2.15.13

3、vue-router路由模块导入

npm install vue-router@3.5.1

4、vue-axios模块导入

npm install vue-axios@3.5.2

5、vue-echarts报表导入

npm install echarts@5.4.1

6、vuex模块导入

npm install vuex@3.6.2

验证package.json如下：

八、路由配置

1、main.js

import Vue from 'vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI);

//(路由守卫)全局前置路由
// router.beforeEach((to, from, next) =>{
//     //to:去哪儿 from: 来自哪儿，next就是执行的意思，不写页面是不会跳转的
//     if(to.path.toString()!='/login'){
//         if(sessionStorage.getItem("token")==null){
//             router.push("/login")
//         }
//     }
//     next()
// })

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

2、router/index.js

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

Vue.use(VueRouter)

const routes = [
    {
        path: '/user',
        component: () => import('../views/UserView.vue'),
    },
    {
        path: '/1-1',
        component: () => import('../views/Page1View.vue'),
    },
    {
        path: '/1-2',
        component: () => import('../views/Page2View.vue'),
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3、App.vue配置

<template>
  <!-- 声明路由的占位符 -->
  <router-view></router-view>
</template>

4、在components目录建2个vue文件

HomeView.vue
<template>
{{name}}
</template>
<script>
export default {
  data(){
    return{
      name: "HomeView"
    }
  }
}
</script>
<style scoped>
</style>

HelpView.vue
<template>
{{name}}
</template>
<script>
export default {
  data(){
    return{
      name: "HelpView"
    }
  }
}
</script>
<style scoped>
</style>

4、启动并浏览器分别访问

http://localhost:8080/#/home
http://localhost:8080/#/help

九、HomeView添加一个带图标的按钮

查阅官网第一次尝试使用element-plus, 从最简单的按钮开始

<template>
  <el-button type="success" icon="Edit">{{buttonValue}}</el-button>
</template>
<script>
export default {
  data() {
    return {
      buttonValue: "使用Axios发送Ajax请求"
    }
  },
}
</script>

十、HomeView单击按钮发送Ajax请求

<template>
  <el-button type="success" icon="Edit" @click="load">{{buttonValue}}</el-button>
  <p v-text="respData"></p>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      buttonValue: "使用Axios发送Ajax请求",
      respData:''
    }
  },
  methods: {
    load() {
      axios.get("http://localhost:8088/demo").then(resp=>{
         this.respData = resp.data
      });
    }
  }
}
</script>