vue 脚手架新手入门（vue cli 2）

偏执的太偏执、 2023-10-09 22:40 17阅读 0赞

#### 文章目录 ####

*  写在前面
 *   *  1、创建一个vue项目
     *  2、项目结构
     *   *  2.1、写两个页面试试
         *  2.2、代码解释
     *  3、前后端对接
     *   *  3.1、使用 axios 发起简单请求
         *  3.2、 路由 的使用
         *   *  3.2.1、配置默认地址前缀
             *  3.2.2、添加子路由
             *  3.2.3、切换路由
             *  3.2.4、监听路由
             *  3.2.5、方法调用 与 页面刷新
             *  3.2.6、this.$route 获取路由信息
         *  3.3、 axios 的使用
         *   *  3.3.1、post请求
             *  3.3.2、上传文件
     *  4、Vue函数生命周期
     *  5、打包
     *   *  5.1、放到spring boot中运行

## 写在前面 ##

1、安装vue前你需要先安装node.js : [https://nodejs.org/zh-cn/download][https_nodejs.org_zh-cn_download]

> 请安装版本 node.js>=6，npm>3

2、如果你的npm下载依赖速度很慢，请配置淘宝镜像

npm config set registry https://registry.npm.taobao.org     // 配置淘宝镜像
    npm config get registry                                     // 查看配置的是哪个地址

3、本文使用的是vue cli 2, 编码工具是vsCode

4、vue开发尽量遵循风格指南，特别是命名，避免一些冲突：[https://v2.cn.vuejs.org/v2/style-guide][https_v2.cn.vuejs.org_v2_style-guide]

5、这个网站可以模拟后端接口（在后端接口还没有出来的时候用）：[http://rap2.taobao.org/account/login][http_rap2.taobao.org_account_login]

### 1、创建一个vue项目 ###

安装之前，如果你已经安装了vue 3,下面是卸载相关指令。

npm uninstall -g @vue/cli     // 卸载vue3
    npm uninstall -g vue-cli     // 卸载vue2
    vue -V                       // 查看vue版本

安装vue，并创建vue项目

npm install -g vue-cli        // 安装vue
    vue init webpack my-project   // 创建vue项目my-project，模板是webpack
    cd my-project                 // 进入项目目录
    npm run dev                   // 启动项目

创建项目时有下面几个选项，大多数可以直接按回车  
![在这里插入图片描述][d97f24a170574cb9aa00e1e7697852c8.png]

> 最后还有一个是否要为你运行“npm install”，选择“yes,use npm”  
> 详见：[https://blog.csdn.net/soulman1234/article/details/106021143][https_blog.csdn.net_soulman1234_article_details_106021143]

用vsCode打卡项目文件夹，启动后用浏览器访问 [http://localhost:8080][http_localhost_8080]，就可以看到页面了  
![在这里插入图片描述][1536c028eff042d993a038e597b16a4f.png]

### 2、项目结构 ###

![在这里插入图片描述][b416c38d9f574c37a7be143168d06965.png]  
主要关注 components 文件夹（组件） 和 index.js（路由）

#### 2.1、写两个页面试试 ####

在components 下新写三个组件：Footer.vue、About.vue、Home.vue  
Footer.vue (显示页脚)

<template>
        <div>
            <P> 这是一个页脚 </P>
        </div>
    </template>
    
    <script>
    export default {
          
        name: 'Footer'
    }
    </script>

Home.vue（主页）

<template>
      <div class="home">
        <h1>{
       { title }}</h1>
        <div>
          <a href="#/home"> 主页 </a>
          <a href="#/about"> 关于 </a>
        </div>
      </div>
    </template>
    
    <script>
    import Footer from './Footer'
    export default {
          
      name: 'Home',
      data () {
          
        return {
          
          title: '这是主页'
        }
      },
      components: {
          
        Footer // 注册主键
      }
    }
    </script>
    
    <style scoped>
    .home {
          
      color: #42b983;
    }
    </style>

About.vue (关于页面)

<template>
      <div class="about">
        <h1>{
       { title }}</h1>
        <div class="about">
          <a href="#/home"> 主页 </a>
          <a href="#/about"> 关于 </a>
        </div>
        <Footer></Footer>
      </div>
    </template>
    
    <script>
    import Footer from './Footer'
    
    export default {
          
      name: 'About',
      data () {
          
        return {
          
          title: '关于我们'
        }
      },
      methods: {
          
    
      },
      components: {
          
        Footer // 注册主键
      }
    }
    </script>

在index.js里面配置 About和Home 的路由

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/components/Home'
    import About from '@/components/About'
    
    Vue.use(Router)
    
    export default new Router({
        
      routes: [
        {
        
          path: '/',
          redirect: '/home'
        }, {
        
          path: '/about',
          component: About
        }, {
        
          path: '/home',
          component: Home
        }
      ]
    })

下面是新的目录结构（我把新建项目时生成的HelloWorld.vue删除了）  
![在这里插入图片描述][1aaafa70b8774c96ab85201cae45764a.png]

输入npm run dev启动，访问 http://localhost:8080  
![在这里插入图片描述][d13437ed7c2d4901857518e48074dd63.png]

#### 2.2、代码解释 ####

Footer.vue 页脚  
![在这里插入图片描述][ae53208c37e74693b33d4576c106dd1b.png]

在Home组件里面引用 Footer组件  
![在这里插入图片描述][d56209e6520b47379a17c71c5de0d254.png]

在路由里面注册 /home 路径  
![在这里插入图片描述][19efc5010f6d4b328244a5da1fa13838.png]

图片的引用  
![在这里插入图片描述][4e8a2349778e4f8387ca6d47f53c13b3.png]

### 3、前后端对接 ###

> 以下接口来自 [http://rap2.taobao.org/][http_rap2.taobao.org] 模拟接口

#### 3.1、使用 axios 发起简单请求 ####

安装

npm install axios

在index.js中导入axios

import axios from 'axios'
    Vue.prototype.$http = axios   // 替换vue内部的$http

![在这里插入图片描述][8c7897be8d2f4cfead0676beeef5651e.png]  
请求示例：（About.vue）

<template>
      <div class="about">
        <h1>{
       { title }}</h1>
        <div class="about">
          <a href="#/home"> 主页 </a>
          <a href="#/about"> 关于 </a>
        </div>
        <Footer></Footer>
        <table border="1">
          <tr v-for="(user, index) in users" :key="index">
            <td>{
       { user.id }}</td>
            <td>{
       { user.name }}</td>
          </tr>
        </table>
      </div>
    </template>
    
    <script>
    import Footer from './Footer'
    
    export default {
          
      name: 'About',
      data () {
          
        return {
          
          title: '关于我们',
          users:[]
        }
      },
      methods: {
          
    
      },
      components: {
          
        Footer
      },
      created(){
          
          this.$http.get("http://rap2api.taobao.org/app/mock/311480/haha").then(res=>{
          
            console.log(res.data);
            this.users = res.data.users;
          });
        }
    }
    </script>

图解  
![在这里插入图片描述][ad6d9ba5fb134880b274b306fcbb3991.png]

#### 3.2、 路由 的使用 ####

##### 3.2.1、配置默认地址前缀 #####

在index.js里面加入以下配置

axios.defaults.baseURL = "http://XXXXX:8081"

![在这里插入图片描述][832aa1edee964a76af696366d5ab8d53.png]

##### 3.2.2、添加子路由 #####

新建组件 AboutDetail.vue

<template>
        <div>
          <p>{
       { info }}</p>
        </div>
     </template>
      
      <script>
      export default {
          
        data () {
          
          return {
          
            info: '这是一段关于网站的介绍'
          }
        }
      }
      </script>

在index.js中添加子路由  
![在这里插入图片描述][995c06c8c065415abca7168de725cdc6.png]

在 About.vue中引用  
![在这里插入图片描述][ef35b2c6507f441d8b7c3f9c81cbc04b.png]

##### 3.2.3、切换路由 #####

![在这里插入图片描述][5c3fb105f35c43bbbf7f3d55d5e5d968.png]

##### 3.2.4、监听路由 #####

第一种全局监控，每次进入页面之前都会触发，可以根据需求而定操作。

router.beforeEach(){
        
    	//你的操作
    }

第二种就是写在页面里面的，这种配合vuex，或者事件管理会更方便，当然这个也是根据需求而定。

data(){
        
    	return {
        }
    },
    computed{
        }，
    mounted{
        }，
    watch{
        
    	'$route' (to, from) {
        
    	      console.log(to)
    	      console.log(from)
    	}
    }

##### 3.2.5、方法调用 与 页面刷新 #####

![请添加图片描述][1e44bc81bdeb4a9f986b8314817fe67a.png]

##### 3.2.6、this.$route 获取路由信息 #####

export default {
        
      methods: {
        
        getPath() {
        
          const path = this.$route.path; // 获取当前路由路径
        },
        getName() {
        
          const name = this.$route.name; // 获取当前路由名称
        },
        getMeta() {
        
          const meta = this.$route.meta; // 获取当前路由元数据
        },
        redirect() {
        
          this.$router.push('/new-url'); // 重定向到指定路由
        },
        switchTo() {
        
          this.$router.push('/another-url'); // 切换到指定路由
        },
        push() {
        
          this.$router.push('/new-url'); // 添加路由到历史记录中
        },
        replace() {
        
          this.$router.replace('/another-url'); // 替换当前路由为指定路由
        },
        go(n) {
        
          this.$router.go(n); // 跳转到历史记录中的第 n 个路由
        },
        history() {
         
           return this.$router.history; // 访问当前路由的历史记录 
        },
       	getQueryParams() {
        
          const params = this.$route.query; // 获取 URL 查询参数的值
          console.log(queryParams); // 输出：{ key1: 'value1', key2: 'value2' }
        },
        getParams() {
        
          const params = this.$route.params; // 获取 URL 参数的值
          console.log(pathParams); // 输出：['page', '1', 'John']
        },
    }

#### 3.3、 axios 的使用 ####

##### 3.3.1、post请求 #####

const obj={
        
      id:1,
      name: 'name'
    }
    this.$http.post('url接口地址',obj).then((res)=>{
        
      	console.log(res)
    }),

##### 3.3.2、上传文件 #####

data: {
        
              name: '',
              age: '',
              file: ''
            },
            methods: {
        
              getFile(event) {
        
                this.file = event.target.files[0];
                console.log(this.file);
              },
              submitForm(event) {
        
                event.preventDefault();
                let formData = new FormData();
                formData.append('name', this.name);
                formData.append('age', this.age);
                formData.append('file', this.file);
     
                let config = {
        
                  headers: {
        
                    'Content-Type': 'multipart/form-data'
                  }
                }
     
                this.$http.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) {
        
                  if (response.status === 200) {
        
                    console.log(response.data);
                  }
                })
              }
            }

### 4、Vue函数生命周期 ###

### 5、打包 ###

打包指令

npm run build

打包完成项目目录下会多一个dist目录  
把整个dist放到tomcat或Nginx服务下就可以访问项目

#### 5.1、放到spring boot中运行 ####

yml中添加配置

spring:
      web:
        resources:
          static-locations: classpath:/static/

把整个dist文件放到 resources/static/ 中  
![在这里插入图片描述][e0f5a519449644f1ba30f039d0152904.png]  
然后修改index.html中资源路径（前面加上 /项目路径/dist ）  
![在这里插入图片描述][35f73ac311ef4d9795c73a56aad4c317.png]  
启动，访问  
http://127.0.0.1:8080/dist/index.html

[https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download
[https_v2.cn.vuejs.org_v2_style-guide]: https://v2.cn.vuejs.org/v2/style-guide
[http_rap2.taobao.org_account_login]: http://rap2.taobao.org/account/login
[d97f24a170574cb9aa00e1e7697852c8.png]: https://img-blog.csdnimg.cn/d97f24a170574cb9aa00e1e7697852c8.png
[https_blog.csdn.net_soulman1234_article_details_106021143]: https://blog.csdn.net/soulman1234/article/details/106021143
[http_localhost_8080]: http://localhost:8080
[1536c028eff042d993a038e597b16a4f.png]: https://img-blog.csdnimg.cn/1536c028eff042d993a038e597b16a4f.png
[b416c38d9f574c37a7be143168d06965.png]: https://img-blog.csdnimg.cn/b416c38d9f574c37a7be143168d06965.png
[1aaafa70b8774c96ab85201cae45764a.png]: https://img-blog.csdnimg.cn/1aaafa70b8774c96ab85201cae45764a.png
[d13437ed7c2d4901857518e48074dd63.png]: https://img-blog.csdnimg.cn/d13437ed7c2d4901857518e48074dd63.png
[ae53208c37e74693b33d4576c106dd1b.png]: https://img-blog.csdnimg.cn/ae53208c37e74693b33d4576c106dd1b.png
[d56209e6520b47379a17c71c5de0d254.png]: https://img-blog.csdnimg.cn/d56209e6520b47379a17c71c5de0d254.png
[19efc5010f6d4b328244a5da1fa13838.png]: https://img-blog.csdnimg.cn/19efc5010f6d4b328244a5da1fa13838.png
[4e8a2349778e4f8387ca6d47f53c13b3.png]: https://img-blog.csdnimg.cn/4e8a2349778e4f8387ca6d47f53c13b3.png
[http_rap2.taobao.org]: http://rap2.taobao.org/
[8c7897be8d2f4cfead0676beeef5651e.png]: https://img-blog.csdnimg.cn/8c7897be8d2f4cfead0676beeef5651e.png
[ad6d9ba5fb134880b274b306fcbb3991.png]: https://img-blog.csdnimg.cn/ad6d9ba5fb134880b274b306fcbb3991.png
[832aa1edee964a76af696366d5ab8d53.png]: https://img-blog.csdnimg.cn/832aa1edee964a76af696366d5ab8d53.png
[995c06c8c065415abca7168de725cdc6.png]: https://img-blog.csdnimg.cn/995c06c8c065415abca7168de725cdc6.png
[ef35b2c6507f441d8b7c3f9c81cbc04b.png]: https://img-blog.csdnimg.cn/ef35b2c6507f441d8b7c3f9c81cbc04b.png
[5c3fb105f35c43bbbf7f3d55d5e5d968.png]: https://img-blog.csdnimg.cn/5c3fb105f35c43bbbf7f3d55d5e5d968.png
[1e44bc81bdeb4a9f986b8314817fe67a.png]: https://img-blog.csdnimg.cn/1e44bc81bdeb4a9f986b8314817fe67a.png
[e0f5a519449644f1ba30f039d0152904.png]: https://img-blog.csdnimg.cn/e0f5a519449644f1ba30f039d0152904.png
[35f73ac311ef4d9795c73a56aad4c317.png]: https://img-blog.csdnimg.cn/35f73ac311ef4d9795c73a56aad4c317.png