首页 > 其他 > 详细

vue安装使用

时间:2019-02-20 17:38:46      阅读:171      评论:0      收藏:0      [点我收藏+]

一、安装(cmd)

1、全局安装vue

cnpm install --global vue-cli

2、cd到需要创建项目的文件夹下

3、创建项目 项目是基于webpack的

vue init webpack my-project(项目名称)

技术分享图片

4、安装依赖库

cd 项目

cnpm i

5、启动文件

npm start

6、安装成功

 

二、vue目录

 1、项目安装成功界面(http://localhost:8080/#/)

技术分享图片

2、项目目录

build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

 

三、成绩表练习

main.js App.vue项目入口文件

index.html 首页入口文件

Achievement.vue 成绩单组件

index.js 路由

技术分享图片
import Vue from ‘vue‘
import Router from ‘vue-router‘
// import HelloWorld from ‘@/components/HelloWorld‘
//导入Achievement组件
import Achievement from ‘@/components/Achievement‘

Vue.use(Router)

export default new Router({
    // 路由
  routes: [
    {
      path: ‘/‘,
      name: ‘Achievement‘,
      component: Achievement
    }
  ]
})
index.js

App.vue 项目入口

技术分享图片
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>
App.vue

Achievement.vue 成绩单组件

技术分享图片
<template>
    <div class="achievement">
        <h1>成绩单</h1>
        <div>
            <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td :class="th">姓名</td>
                    <td :class="th">性别</td>
                    <td :class="th">分数</td>
                    <td :class="th">操作</td>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{item.username}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.grade}}</td>

                    <td>
                        <a href="#" @click="delClick(index)">删除</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="addclass">
            姓名: <input type="text" class="texts" v-model="username">
            性别: <select v-model="sex">
                <option value ="男" selected></option>
                <option value ="女"></option>
            </select>
            分数: <input type="text" class="texts" v-model="grade">
            <input type="button" class="addbutton" value="添加" @click="addClick">
        </div>
    </div>
</template>

<script>
export default {
    name: Achievement,
    data () {
        return {
            th:"ths",
            username: "",
            sex:"",
            grade:"",
            arr: [{username:"小赵", sex:"", grade:90},{username:"小钱", sex:"", grade:80},{username:"小孙", sex:"", grade:70},{username:"小李", sex:"", grade:60}]
        }
    },
    methods: {
        addClick () {
            if (isNaN(this.grade)||this.grade == ""){
                alert("分数输入错误!")
            }
            else if (this.username == ""){
                alert("请输入姓名!")
            }
            else if (this.sex == ""){
                alert("请选择性别!")
            }
            else{               
                this.arr.push({username:this.username, sex:this.sex, grade:this.grade});
            }
        },
        delClick (index) {
            this.arr.splice(index,1);
        }
    }
}
</script>

<!-- "scoped" 意思是此样式只对本组件有用 -->
<style scoped>
    table {
        font-size: 25px;
        margin: 0 auto;
    }
    .ths {
        font-weight: bold;
        background: #F0F0F0;
    }
    td {
        height: 50px;
        width: 150px;
    }
    a {
        text-decoration: none;
        color: red;
    }
    .addclass {
        font-size: 25px;
        line-height: 30px;
        margin-top: 30px;
    }
    .texts {
        height: 30px;
        width: 80px;
    }
    .addbutton,select {
        height: 35px;
        width: 60px;
    }
</style>
Achievement.vue

 

vue安装使用

原文:https://www.cnblogs.com/liluning/p/10407909.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!