Vue.js

最新推荐文章于 2022-12-15 15:20:43 发布
最新推荐文章于 2022-12-15 15:20:43 发布
阅读量6.3k 收藏
点赞数
分类专栏： vue.js 文章标签： vue js html node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43999182/article/details/106003803
版权

Vue.js

开发模式：

  • CDN

  • NPM

    • 在用 Vue 构建大型应用时推荐使用 NPM 。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

学习开发工具：Visual Studio Code

工具下载网址：Visual Studio Code下载地址

  • 装好软件后装几个插件：
    1、Live Server
    为静态和动态页面启动带有实时重新加载功能的开发本地服务器

2、Vetur
用于VS代码的Vue工具

3、Vue.js with TypeScript Snippets for VSCode
使用SFC或基于类的API (vscode)的TypeScript收集Vue.js的代码片段

  • 设置一下工具：
  • 加上（可以格式化代码）：
    “editor.formatOnType”: true,
    “editor.formatOnSave”: true,
    在这里插入图片描述

Vue-CDN的使用

  • 创建项目（创建一个文件夹：vue-basic-cdn）
  • 创建三个资源：index.html、app.js、styles.css
    app.js:
//实列化vue对象
new Vue({
    el: '#vue-app', //element（容器）返回的数据只能在本容器中使用
    data() {
        return {
            name: "米罗",
            age: "18"
        };
    }
})

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue CDN</title>
</head>
<body>
    <div id="vue-app">
        <h1>欢迎：{{name}}</h1>
        <p>年龄：{{age}}</p>
    </div>
</body>
<script src="app.js"></script>

</html>

使用vue中的方法(Methods)和指令(v-bind)：

指令还有很多可以看官网的使用方法

  • 页面：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>欢迎：{{name}}</h1>
        <p>年龄：{{age}}</p>
        <h1>methods:{{green()}}</h1>
        <h1>methods2:{{green2('2018-5-8')}}</h1>
        <a v-bind:href="url">百度</a>
        <a :href="url">百度</a>
        <p v-html="a"></p>
    </div>
</body>
<script src="app.js"></script>

</html>
  • js：
//实列化vue对象;this指的就是这个实例
new Vue({
    el: '#vue-app', //element（容器）
    data() {
        return {
            name: "米罗",
            age: "18",
            url: "https:www.baidu.com",
            a: "<a href='https:www.taobao.com'>淘宝</a>"
        };
    },
    methods: {
        // green: function () {
        //     return 'Good night' + this.name;
        // }
        green() {
            return `Good night ${this.name}`;
        },
        green2(time) {
            return `Good night ${time} ${this.name}`;//这里是反引号这主键盘去的1后面
        }
    }
})

vue鼠标事件的使用

  • 常见的事件类型

    click：鼠标单击某元素时触发，相当于mousedown和mouseup的组合
    dblclick：双击事件
    mouseover：鼠标放在某元素上触发
    mouseout：鼠标移出某元素时触发
    mousemove：鼠标移动时触发
    mousedown：鼠标按钮被按下时触发
    mouseup：鼠标按钮被松开时触发
    dblclick：鼠标双击时触发

  • 属性修饰符：

    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

  • 实例：
    页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <!-- 加不加（）都没问题，它会先找methods中的方法 -->
        <button id="but1" v-on:click="num++">单击+1</button>
        <button id="but2" @click="num--">单击-1</button>
        <button id="but1" v-on:click="numon(1)">单击+1</button>
        <button id="but2" @click="numup(1)">单击-1</button>
        <button id="but1" v-on:dblclick="numon(10)">双击+10</button>
        <button id="but2" @dblclick="numup(10)">双击-10</button>
        <p>当前值：{{num}}</p>
        <!-- mousemove event（鼠标移动时触发） -->
        <div id="mouse" v-on:mousemove="updateXY">
            {{x}} , {{y}}
        </div>
        <!-- 属性修饰符 -->
        <a @click.prevent="onmethod" href="https://www.baidu.com">百度</a>
    </div>

</body>
<script src="app.js"></script>

</html>

js:

//实列化vue对象;this指的就是这个实例
new Vue({
    el: '#vue-app', //element（容器）
    data() {
        return {
            num: 50,
            x: 0,
            y: 0
        };
    },
    methods: {
        numon(a) {
            this.num += a;
        },
        numup(a) {
            this.num -= a;
        },
        updateXY(event) {
            // console.log(event);
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
})

vue键盘事件的使用

更多键盘事件链接

        <label>姓名：</label>
        <!-- 当按Enter键才会触发 -->
        <input type="text" v-on:keydown.enter="logName" />
        <label>年龄：</label>
        <input type="text" v-on:keyup.alt.enter="logAge" />

双向数据绑定

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

	//js
		    data() {
		        return {
		            name: '',
		            age: null
		        };
		    },
	//html
        <!-- 双向数据绑定 -->
        <label>姓名：</label>
        <!-- lazy相当于懒加载就是输入框失去焦点时才改值 -->
        <input type="text" v-model.lazy="name" />
        <span>{{name}}</span>
        <label>年龄：</label>
        <input type="text" v-model="age" />
        <span>{{age}}</span>
ref 的使用：

可以使用$refs获取ref的父级：
一般用ref获取容器（相当于FindById）
js：

        getname() {
            this.name = this.$refs.name.value;
        },
        getage() {
            this.age = this.$refs.age.value;
        }

html：

        <label>姓名：</label>
        <input type="text" ref="name" @keyup="getname" />
        <span>{{name}}</span>
        <label>年龄：</label>
        <input type="text" ref="age" @keyup="getage" />
        <span>{{age}}</span>

使用watch调式：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

//实列化vue对象;this指的就是这个实例
new Vue({
    el: '#vue-app', //element（容器）
    data() {
        return {
            name: '',
            age: null
        };
    },
    methods: {
    },
    watch: {
        //val:新值；oldVal：旧值
        name(val, oldVal) {
            console.log(val, oldVal);
        }
    }
})

computer计算属性的使用：

使用methods中的方法时，实用其中一个方法，实际上其他方法也会被运行（耗费性能）。这样可以使用计算属性。

js定义：

new Vue({
    el: '#vue-app',
    data() {
        return {
            a: 0,
            b: 0,
        };
    },
    methods: {
    },
    //computer中的方法必须有返回值
    computed: {
        numplus() {
            return this.a + this.b;
        }
    }
})

html使用：

    <div id="vue-app">
        <!-- computer -->
        <button id="but1" v-on:click="a++">单击+1</button>
        <button id="but2" @click="b++">单击-1</button>
        <p>当前值a：{{a}}</p>
        <p>当前值b：{{b}}</p>
        <!-- 调用computer时不能加括号 -->
        <p>a+b={{numplus}}</p>
    </div>

动态CSS(v-bind:class)：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <h1>动态绑定样式，两种方式</h1>
        <!-- <h2>示例1 属性绑定</h2>
        <div @click="mrChangeColor=!mrChangeColor" v-bind:class="{add:mrChangeColor}">
            <span>Hello</span>
        </div> -->
        <h2>示例2 计算属性绑定</h2>
        <div @click="michangcolor=!michangcolor" v-bind:class="addclass">
            <span>Hello</span>
        </div>
    </div>

</body>
<script src="app.js"></script>

</html>

js:

new Vue({
    el: '#vue-app',
    data() {
        return {
            mrChangeColor: true,
            michangcolor: true
        };
    },
    methods: {
    },
    //computer中的方法必须有返回值
    computed: {
        addclass() {
            return {
                add: this.mrChangeColor,
                adder: this.michangcolor
            };
        }
    }
});

css:

div span{
    background: red;
    display: inline=block;
    color: white;
    margin: 10px 0;
}
.add span{ 
    background: rgb(37, 36, 33);
}
.adder span::after{ 
    content: '效果';
    margin-left: 10px;
}

在这里插入图片描述

v-if、v-else、v-else-if、v-show:

js:

    data() {
        return {
            error: false,
            success: false
        };

html:

    <div id="vue-app">
        <h1>v-if</h1>
        <button id="fontclass" @click="error=!error">显示error</button>
        <button id="fontclass" @click="success=!success">显示success</button>
        <!-- <p v-if="error">error：连接错误404</p>
        <p v-else-if="success">success：连接成功：200</p>
        <p v-else="success">Other</p> -->
        <!-- show -->
        <!-- 和v-if的区别在于show会加一个display: none;属性 -->
        <p v-show="error">success：连接成功：200</p>
        <p v-show="success">Other</p>
    </div>

v-for:

html:

<div id="vue-app">
        <h1>v-for指令</h1>
        <!-- {{names[0]}},
        {{names[1]}},
        {{names[2]}},
        {{names[3]}}, -->
        <!-- <ul>
            <li v-for="names in names">{{names}}</li>
        </ul> -->
        <!-- <template>
            <li v-for="(names,item) in names">{{item}}.{{names}}</li>
        </template> -->
        <template>
            <li v-for="(names,item) in users">{{names.name}}.{{names.age}}</li>
        </template>
        <template v-for="(user,item) in users">
            <li v-for="(val,key) in user">
                <p>{{key}}——{{val}}</p>
            </li>
        </template>
    </div>

js:

new Vue({
    el: '#vue-app',
    data() {
        return {
            names: ["小猪佩奇", "西奥潘西", "小鸡莉莉", "小项雍熙"],
            users: [
                { name: "小猪佩奇", sex: "男", age: 3 },
                { name: "西奥潘西", sex: "男", age: 2 },
                { name: "小鸡莉莉", sex: "女", age: 1 },
                { name: "小项雍熙", sex: "男", age: 5 },
            ]
        };
    },
    methods: {
    },
});

练习

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Vue CDN</title>
</head>

<body>
    <div id="vue-app">
        <div id="image" :class="{burst:start}"></div>
        <div id="ku">
            <div id="tiao" :style="{width:health+'%'}"></div>
        </div>
        <div id="con">
            <button id="butup" @click="da" v-show="!start">打击</button>
            <button id="butnew" @click="nostart">重新开始</button>
        </div>
    </div>

</body>
<script src="app.js"></script>

</html>

js

new Vue({
    el: '#vue-app',
    data() {
        return {
            start: false,
            health: 100
        };
    },
    methods: {
        da() {
            this.health -= 10;
            if (this.health <= 0) {
                this.start = true;
                console.log("da");
            }
        },
        nostart() {
            this.health = 100;
            if (this.health == 100) {
                this.start = false;
            }
        }
    },
});

css

#image{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: url(image/01.jpg) center no-repeat;
    background-size: 100%;
}
#image.burst{
    background: url(image/04.jpg) center no-repeat;
    background-size: 100%;
}
#ku{
    width: 200px;
    border: 2px solid black;
    margin: 0 auto 20px auto;
}
#tiao{
    height: 20px;
    background-color: red;
}
#con{
    width: 120px;
    margin: 0 auto;
}

多个Vue实例（const ）：

//多个Vue实例
const method1 = new Vue({
    el: '#vue-app',
    data() {
    },
});
const method2=new Vue({
    el: '#vue-app',
    data() {
    },
});

全局组件（component）：

js：

//定义全局变量
let data = {
    name: '小罗',
    wechat: '2510116656'
};

//创建全局组件(Greeting是自己定义的名称)
Vue.component("Greeting", {
    //html模版
    template: `
    <p>这是一个全局变量，
    可以在任何一个Vue实例中使用
    姓名：{{name}}
    微信：{{wechat}}
    <button @click="chanageName">改名</button>
    </p>
    `,
    //属性、方法等
    data() {
        return data;

    },
    methods: {
        chanageName() {
            this.name = "小罗在线";
        }
    }
})

//多个Vue实例
const app = new Vue({
    el: '#vue-app'
});
const app2 = new Vue({
    el: '#vue-app2'
});

html：

    <div id="vue-app">
        <Greeting />
    </div>
    <div id="vue-app2">
        <Greeting></Greeting>
    </div>

Vue Fatch和Axios请求

我这使用的接口是：测试接口

实例：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Vue CDN</title>
</head>

<body>
    <h1>Fetch请求</h1>
    <div id="vue-app">

        <form @submit.prevent="onSubmit">
            <input type="text" v-model="todo.title">
            <input type="checkbox" v-model="todo.completed">
            <input type="submit" value="提交">
        </form>

        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>
            </li>
        </ul>
    </div>
    <div id="vue-app2">
    </div>
</body>
<script src="app.js"></script>

</html>

js：

new Vue({
    el: '#vue-app',
    data() {
        return {
            todos: [],
            todo: {
                title: "",
                completed: false
            }
        };
    },
    // mounted是个函数会自动执行
    mounted() {
        //fetch api请求接口
        // fetch('http://jsonplaceholder.typicode.com/todos').then(res => {
        //     //console.log(res.json());
        //     return res.json();
        // })
        //     .then(todos => {
        //         this.todos = todos;
        //     });
        //axios get请求(这种常用一点)
        axios.get('http://jsonplaceholder.typicode.com/todos').then(
            res => {
                this.todos = res.data;
            }
        )
    },
    methods: {
        onSubmit() {
            //axios post请求
            axios.post("http://jsonplaceholder.typicode.com/todos",
                this.todo).then(res => {
                    //console.log(res);
                    //将结果写到对象中
                    this.todos.unshift(res.data);
                })

            // fetch('http://jsonplaceholder.typicode.com/todos', {
            //     //请求方式
            //     method: "POST",
            //     //转换成json
            //     body: JSON.stringify(this.todo),
            //     headers: {
            //         'Content-Type': 'application/json'
            //     }
            // }).then(res => {
            //     return res.json();
            // })
            //     .then(todo => {
            //         console.log(todo);
            //         this.todos.unshift(todo);
            //     });
        }
    }
});

Vue Cli(脚手架)开发

一般公司不会用CDN，而是使用Vue Cli进行开发。

  • 脚手架需要的环境：

    • Node.js运行环境（这个环境可以让js独立运行）做前端的可以去学一下Node.js
    • npm(node package manage)依赖包（包含很多组件等，国外）

  • 脚手架的好处：

    • 1.脚手架可以大大的提高开发系效率；
    • 2.可以使用最主流的ECMAScript语法；
    • 3.通过Webpack实现编译查看效果(非浏览器编译)；前端需要去学一下Webpack
    • 4.自动更新，可实时查看最新效果等；

  • 安装 Node.js运行环境：

    • 先下载node.js;下载地址：node.js官网
    • 安装一直下一步就OK了
    • 测试环境（CMD）：node -v\npm -v

  • npm依赖

  • 安装Vue Cli(脚手架)

    • 安装Vue Cli可以直接看官网：安装Vue Cli官网
    • 在 CMD中输入：npm install -g @vue/cli（-g表示所有）
    • 测试：vue --version
      成功如下图：
      注意脚手架的版本不一定跟vue的版本一样。
      在这里插入图片描述
      -这样配置的npm下载插件是国外的；可以访问cnpm:https://developer.aliyun.com/mirror/NPM?from=tnpm;这是淘宝提供的服务器。配置cnpm在CMD中的输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
      使用：cnpm --version查看

  • 注意：在其他系统使用这些安装命令时需要加sudo(超级管理员) ，windows不用。

创建vue cil并运行：

1、配置项目存放路径：cd 路径
2、创建项目可以用vue --help查看命令；created project vuecil-demo创建项目名称为vuecil-demo
3、创建完之后在选中创建好的项目：cd vuecil-demo
4、启动脚手架npm run serve（关闭服务ctrl+c(可以多按几次)）
打开多个服务，只需重新打开一个cmd然后npm run serve，端口号会不一样

使用Visual Studio Code打开项目：

将项目拖入即可
查看终端如下（点击加号开启多个，按住ctrl点击地址，可以跳转到浏览器）：
在这里插入图片描述
vue项目目录说明可见：vue项目目录说明

组件传值：

只有父组件传值给子组件。
注意：属性传值：值有两种情况，1.传值 2.传引用（对象、数组）引用的是地址，改变值时，会一起变

在这里插入图片描述
在这里插入图片描述

子组件想要改变父组件的值时，需要用到事件

子组件：

  methods: {
    updatetitle() {
      //注册事件 参数1：事件名称，参数2：；值
      this.$emit("updatetitle", "拉布拉多犬title修改后的值");
    }
  }

父组件：
在这里插入图片描述

vue生命线：

在这里插入图片描述

父组件传标签到子组件（slot:占位符）：

父组件：

<h1 slot="text">这是一个文本</h1>

子组件：

 <slot name="text" />

总结项目

父组件：

<template>
  <div id="app">
    <!-- 3、调用组件 -->
    <Header />
    <!-- 属性传值：值有两种情况，1.传值 2.传引用（对象、数组） -->
    <Users :users="users">
      <h1 slot="text">这是一个文本</h1>
    </Users>
    <p>{{title}}</p>
    <foorder @updatetitle="updatetitle" :title="title" />
  </div>
</template>

<script>
//1、局部组件的调用
import Users from "./components/Users";
import Header from "./components/Header";
import Foorder from "./components/Foorder";

export default {
  name: "App",
  data() {
    return {
      users: [
        { name: "小猪佩奇", wechat: "2510116656", show: true },
        { name: "小猪佩奇", wechat: "2510116656", show: true },
        { name: "小猪佩奇", wechat: "2510116656", show: true },
        { name: "小猪佩奇2", wechat: "2510116656", show: true },
        { name: "小羊苏西", wechat: "2510116656", show: true },
        { name: "小猪佩奇3", wechat: "2510116656", show: true },
        { name: "小猪佩奇4", wechat: "2510116656", show: true },
        { name: "小猪佩奇5", wechat: "2510116656", show: true },
        { name: "小猪佩奇6", wechat: "2510116656", show: true }
      ],
      title: "拉布拉多犬",
      text: "<a>这是一个文本</a>"
    };
  },
  methods: {
    updatetitle(updatetitle) {
      //console.log(updatetitle);
      this.title = updatetitle;
    }
  },
  components: {
    //2、注册组件
    Users,
    //sers:Users,
    // "mr-users": Users
    Header,
    foorder: Foorder
  }
};
</script>
//scoped相当于作用域
<style>
h1 {
  color: purple;
}
</style>

子组件：

<template>
  <div class="foorder">
    <footer>
      <p>{{copyright}}</p>
      <p @click="updatetitle()">{{title}}</p>
    </footer>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    }
  },
  data() {
    return {
      copyright: "copyright 2020 Vue Demo"
    };
  },
  methods: {
    updatetitle() {
      //注册事件 参数1：事件名称，参数2：；值
      this.$emit("updatetitle", "拉布拉多犬title修改后的值");
    }
  }
};
</script>
<style scoped>
.foorder {
  background: black;
  padding: 10px;
}
p {
  color: white;
  text-align: center;
}
</style>

子组件：

<template>
  <div class="users">
    <h1>Users.vue</h1>
    <slot name="text" />
    <ul>
      <!-- 在使用脚手架的for时必须给一个key值一定时唯一的值 -->
      <li @click="user.show=!use.show" v-for="(use,index) in users" :key="index">
        <h2>{{use.name}}</h2>
        <h2 v-show="use.show">{{use.wechat}}</h2>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  //   props: ["users"],
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    test() {
      console.log(this.users);
    }
  }
};
</script>
<style scoped>
h1 {
  color: green;
}
</style>

子组件：

<template>
  <div class="foorder">
    <footer>
      <p>{{copyright}}</p>
      <p @click="updatetitle()">{{title}}</p>
    </footer>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    }
  },
  data() {
    return {
      copyright: "copyright 2020 Vue Demo"
    };
  },
  methods: {
    updatetitle() {
      //注册事件 参数1：事件名称，参数2：；值
      this.$emit("updatetitle", "拉布拉多犬title修改后的值");
    }
  }
};
</script>
<style scoped>
.foorder {
  background: black;
  padding: 10px;
}
p {
  color: white;
  text-align: center;
}
</style>

动态组件和缓存（Component和keep-allve）：

在这里插入图片描述

使用VS Code创建vue项目：

跟cmd是一样的。
可能会出现脚本拦截解决方法可见：拦截解决方法

添加插件：

1、 vue add ·需要添加的插件·
2、npm install ·npm install·（3.0后的版本）

vue的环境变量：

创建一个.env文件，定义变量；使用时需要先在data中拿到它（url: process.env.VUE_APP_URL）。
开发环境变量：创建一个.env.development文件，定义，使用都一样。

Vue 3.0后的新特性（可视化）：

可以独立运行.vue文件：

  • 输入命令：vue serve holler.vue（holler.vue是文件）这里它会提示让你装一个全局的组件：npm install -g @vue/cli-service-global

图形页面构建项目（GUi）

  • 终端中输入vue ui，创建跟终端创建时一样的

vue配置文件（默认路径，静态文件等）：

注意文件名必须是（vue.config.js）,这样vue才会自动加载这个文件。
在这里插入图片描述

IT-david
关注
专栏目录
首页课程和名师功能
白长生的小窝
04-29 3361
01-名师页面静态效果整合 一、列表页面 ​ 创建 pages/teacher/index.vue <template> <div id="aCoursesList" class="bg-fa of"> <!-- 讲师列表 开始 --> <section class="container"> <header...
Vue安装live-server
MeiBlog
07-28 1686
安装 npm install live-server -g 启动 live-server 转载注明出处：www.meidanlong.com ????
VueJS live-server 搭建服务
egbertasd的博客
06-08 391
本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。 但现在流行修改文件浏览器自动刷新，这里可以使用 live-server 很简单就能启动一个看起来很专业的本地服务。 你只需要全局安装live-server： npm install -g live-serv 这里是引用 er 并在项目根目录执行这条命令： live-server 然后你什么也不用做，等待一会浏览器就自...
Vue 安装 live-server
张营的技术博客
04-25 4725
live-server是轻量级热插拔插件，在开发阶段可以不用刷新浏览器，只用保存了文件，浏览器自动重新加载页面的元素，非常方便。如果没有用vue-cli搭建项目可以直接全局安装live-server方便开发。如果用vue-cli初始化项目，一般会自带hot插件。 1.安装方法 npm install live-server -g 2.运行 在项目根目录运行： live-server 3...
vue本地打包文件 运行 liveServer
qq_38935512的博客
12-15 1676
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
Vue.js渐进式框架 v2.7.16.zip
最新发布
03-27
Vue.js 是一个流行的开源JavaScript框架，专为构建用户界面而设计，尤其适合单页应用程序（SPA）。"Vue.js 渐进式框架 v2.7.16.zip" 提供的是Vue.js 2.7.16版本的源码和相关文档，这允许开发者深入理解其内部工作...
Asena：Asena，Discord的快速可靠的抽奖和投票机器人！
02-01
:robot_face: 稳定，快速，便捷，并被新一代技术所包围Discord赠品，调查和民意调查机器人！ 多国语言支持 [EN]由于该漫游器在土耳其语服务器上的使用率很高，因此该漫游器的默认语言设置为“土耳其语” 。 您可以使用命令!alocale set <language>更改服务器中机器人的语言。 [TR] Botun育空塞克高头谢蒂尔克sunucularındakullanılmasındandolayıbotunvarsıyılan帝Türkçeolarakayarlanmıştır。 Bolocal sunucuiçerisindeki dilini !alocale set <dil> komutu iledeğiştirebilirsiniz。 使机器人的默认语言为英语的示例： ! alocale set en 命令清单 :mechanical_arm: 前缀：！a（默认） 命令 描述 取消 取消赠品。 创造 在一行中开始新的赠品。 重新滚动 重复赠品的结果。 建立 启动交互式安装向导。 结束 尽早完成赠品。 抽奖 列出服务器
LiveChat在线客服
11-26
PHP在线客服聊天系统，可以将客服源码嵌入到任何网页。使用简单方便。
k8s1.18-kubeadm安装手册
热门推荐
因上努力，果上随缘。但行好事，莫问前程。
04-27 15万+
一、初始化 参考链接：https://kubernetes.io/docs/reference/setup-tools/kubeadm/ 1.1、配置要求 节点配置为2c4g+ 集群中所有机器之间互通 hostname 和 mac 地址集群内唯一 CentOS版本为7，最好是7.9，低版本的建议更新下 集群中所有节点可以访问外网拉取镜像 swap分区关闭 注：这里进行单master方式安装。多master安装方式同理 1.2、初始化 1.所有主机上都要操作 systemctop
一个开源社区的基于WEB的在线客服系统-LiveHelp - [软件开发]
weixin_30522183的博客
05-13 752
一个开源社区的基于WEB的在线客服系统-LiveHelp - [软件开发] 2007-03-02 版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://stack.blogbus.com/logs/4660113.html 曾经在一个供应商的网站上看到在线客服系统，当时觉得很不错。最近找了一下，系统名称应该是“网站商务通”，英文名字叫LiveRec...
【Vue学习笔记】vue-cli-service相关配置说明
weixin_47192515的博客
04-19 4960
vue-cli-service相关配置说明 vue-cli-service： 在脚手架的package.json中，serve配置的是与项目启动相关的信息： --open 在服务器启动时打开浏览器 --copy 在服务器启动时将 URL 复制到剪切版 --mode 指定环境模式 (默认值：development) --host 指定 host (默认值：0.0.0.0) --port 指定 port (默认值：8080) --https 使用 htt
python android api_服务器python 安卓接口
weixin_39957461的博客
12-01 909
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":6,"count":6}]},"card":[{"des":"云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。",...
@vue/cli （五）CLI服务
mutouren_abc的博客
07-08 3271
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。这是使用默认 preset 的项目的 package.json : 可以通过 npm 或 yarn 调用这些 script: 如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命
Vue添加中间层--service层
weixin_43452622的博客
01-23 9007
Vue添加中间层–service层 在单页面应用中，为了方便代码的管理，提高可读性，还有一个原因就是，在项目开发工程中，前端人员与后端开发人员的进程是不同步的，在不同步的情况下，前端人员会使用假数据来模拟后端传送过来的数据，为了节省后期联调的时间，所以把service引入到了vue中。 service层 service层主要是新建一个js文件，用来写用到的方法。 import axios from...
Vue 项目中配置 service worker
qq_43477721的博客
11-14 3614
使用 vue-cli 创建项目，在配置项中选择 PWA。脚手架就会搭好基本的框架。 这个时候不做任何的额外配置也是正常使用。当然，只有打包之后在线上，猜可以看到效果。 根目录下新建 server.js var express = require('express'); var app = express(); const hostname = 'localhost'; const port = 3838; app.use(express.static('./dist')); app.listen(por.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值