1、全局安装Vue，配置环境
npm install -g @vue/cli
2、创建Vue项目
vue create 项目名
3、开启Vue项目
npm run serve
4、项目文件作用
5、Vue组件化思路
- 定义：以vue为后缀的文件，是vue的单文件组件，可以理解为一个可以自定义的，有着更强大功能的标签
- 好处：思路清晰，简洁高效，而且还可以重复使用
| 举例 | |
| 链接 | html的a标签 |
| 登录 | vue组件，登录 |
| 轮播图 | vue组件，轮播图 |
6、main.js文件：入口文件，导入第三方模块，创建Vue项目，挂载到#app容器上
// import ES6模块语法，可以引入第三方模块，require // export ES6模块语法，暴露接口，可以被其他模块调用，modile.exports import Vue from 'vue' import App from './App.vue' // 配置开发选项，友好的错误提示 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
7、template网页模板（编写html文件）
<template> <div id="app"> <!-- 1、绑定文本 --> <h1>{{ message }}</h1> <!-- 2、绑定事件 --> <button @click="sayHi">按钮</button> </div> </template> <script> // 暴露接口，可以被其他模块调用; export default { // 1、数据要用函数返回 data() { return { message: "Hello world!" }; }, // 2、函数在方法中定义 methods: { sayHi() { alert("Hello world!"); }, }, }; </script> <style></style>
