Vue Cli的使用

发表于 | 分类于
字数统计: 896 | 阅读时长 ≈ 4

vue cli是一个用于构建基于vue.js项目（类似于java后端像maven那样）的构建工具。

环境准备

  • 安装node.js

  • 配置 npm（类似于maven中的仓库）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 切换为淘宝镜像源
    npm config set registry https://registry.npm.taobao.org
    # 验证是否切换成功
    npm config get registry
    # 配置npm依赖下载位置
    npm config set cache "d:\nodejs\npm_cache"
    npm config set prefix "d:\nodejs\npm_global"
    # 查看配置 
    npm config ls

  • 安装 vue cli

    1
    2
    # 全局安装 安装在之前配置好的D:\nodejs\npm_global\node_modules目录下
    npm install -g vue-cli

使用vue cli创建一个vue项目

创建一个项目名为hello的vue项目

1
vue init webpack hello

启动项目

1
2
3
4
cd hello
  
npm run dev
# npm start

本地访问

http://localhost:8080

项目结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hello     ------------->项目名
   -build  ------------->用来使用webpack打包使用build依赖
   -config ------------->用来做整个项目配置目录
   -node_modules  ------>用来管理项目中使用依赖
   -src					 ------>用来书写vue的源代码[重点]
     -assets      ------>用来存放静态资源 [重点]
     -components   ------>用来书写Vue组件 [重点]
     -router			 ------>用来配置项目中路由[重点]
     App.vue      ------>项目中根组件[重点]
     main.js      ------>项目中主入口[重点]
   -static        ------>其它静态
   -.babelrc      ------> 将es6语法转为es5运行
   -.editorconfig ------> 项目编辑配置
   -.gitignore    ------> git版本控制忽略文件
   -.postcssrc.js ------> 源码相关js
   -index.html    ------> 项目主页
   -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
   -package-lock.json ----> 对package.json加锁
   -README.md         ----> 项目说明文件

开发步骤

1、编写各个组件：主页、用户、商品等等功能模块，并导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    <h1>网站主页</h1>
  </div>
</template>

<script>
export default {// 导出组件，向外暴露
  name: "Home",
};
</script>

<style>
</style>

2、在index.js中引入并注册组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home' // 引入 Home
import User from '../components/User'
import Student from '../components/Student'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',redirect: '/home'}, // 重定向到 /home
    {path: '/home',component: Home},// 注册 Home
    {path: '/user',component: User},
    {path: '/student',component: Student}
  ]
})

3、在App.vue中添加访问路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>
        <a href="#/home">主页</a>
        <a href="#/user">用户管理</a>
        <a href="#/student">学生管理</a>
        
        <router-view/>
    </div>
</template>

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

<style>
</style>

在vue cli中使用axios

  • 在当前工程下安装axios

    1
    npm install axios --save-dev

  • 在main.js 中引入axios

    1
    2
    3
    import axios from 'axios';

    Vue.prototype.$http=axios; // 修改 vue内部 $http为 axios

  • 发起异步请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <script>
    export default {
      name: "User",
      data() {
          return{
              users: []
          }
      },
      method:{

      },
      components:{

      },
      created(){
          this.$http.get("http://rap2api.taobao.org/app/mock/270195/user/findAll").then(res=>{
            this.users = res.data.results;
          })
      }
    };
    </script>

  • 数据渲染

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <template>
      <div>
        <h1>用户管理</h1>
        <a href="">添加用户</a>
        <table border="1" cellspacing="0" width="600px">
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>生日</th>
            <th align="center">操作</th>
          </tr>
          <tr v-for="user in users">
            <td v-text="user.id"></td>
            <td v-text="user.name"></td>
            <td v-text="user.age"></td>
            <td v-text="user.birth"></td>
            <td align="center"><a href="">修改</a>&nbsp; 
            <a href="">删除</a></td>
          </tr>
        </table>
      </div>
    </template>