简单创建使用Vue项目

最新推荐文章于 2022-09-23 17:42:19 发布

Mr.mzx

最新推荐文章于 2022-09-23 17:42:19 发布

阅读量156

点赞数 1

本文链接：https://blog.csdn.net/weixin_44266668/article/details/93511887

版权

创建Vue项目

首先，确保安装好nodejs，npm
node官网，npm官网
在这里插入图片描述

安装淘宝镜像

>npm install -g cnpm --registry=https://registry.npm.taobao.org  //安装

全局安装vue-cli脚手架

>cnpm install vue-cli -g      //-g是全局安装

在这里插入图片描述

检验是否安装成功，使用如下命令

>vue -V

在这里插入图片描述

创建项目，命令如下

>vue init webpack 项目名              //创建项目

在这里插入图片描述

安装依赖（我在Visual Studio Code中打开）

>npm install

在这里插入图片描述

使用命令启动,把url粘贴到浏览器上

>npm start

在这里插入图片描述

简单使用

可以安装一些需要用的依赖，

>npm install axios   
>npm install antd     //安装antd组件库

在src中的components中写页面代码，，

在这里插入图片描述

Test.vue中写代码，例如以下

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
        <ul>
            <li>
                姓名<input type="text" v-model="username"/>
            </li>
            <li>
                密码<input type="password" v-model="password"/>
            </li>
            <li>
                <input type="submit" value="登录" v-on:click="login"/>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:"Test",
        data(){
            return {
                msg:"Hello",
                username:"",
                password:""
            }
        },
        methods:{
            login(){

                if(this.username!==null&&this.password!==null){
                    alert(this.username+"-----"+this.password);
                }
                    
                
            }
        }
        
    }
</script>

<style src="./Test.css"></style>

index.js中添加路由，代码如下
在这里插入图片描述