目录
VUE
HTML
CSS
JavaScript
VUE
1.安装环境
- 安装node.js,官网下载安装包并添加环境变量
- 控制台执行node –version来检查安装是否成功
- 安装vue
- 控制台执行vue –version来检查安装是否成功
2.搭建veu2.0脚手架
3.vue2.0目录
- public里放的是图标
- src负责写项目
- assets放静态资源css等
- components放组件
- router放路由
- store放VueX
- view放显示页面,里面的每个.vue代表一个路由走到的页面
- app.vue会战胜view里面的所有页面
- main.js写导入逻辑
- package.json放版本号
4.添加一个组件的步骤
- 在components里面用vue component模板写一个hello.vue
- 然后在home.view里
- import Hello from “@/components/Hello”;
- 并在components里面加上Hello
- 然后就可以在想引入的位置加上就会展示组件里写的内容了
5.Element的使用方法
- 在main.js里面额外加上
1 2 3 4
| import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
|
- 在一个组件文件里写(这部分代码直接用element网页上给的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <template> <el-input v-model="input" placeholder="请输入内容"></el-input> </template>
<script> export default { name: "myInput", data() { return { input: '' } } } </script>
|
- 然后再在要展示的页面里引入这个组件即可
5.引入已有html中的head->link里的样式
- 在view的template和import中间按以下格式引入
1 2 3 4
| <style> @import '/src/assets/css/bootstrap.min.css'; @import '/src/assets/css/owl.carousel.min.css'; </style>
|
6.组件不同状态的切换显示/隐藏
HTML
1.基本语法
- 标题
1
| <h1>-<h6> xx </h1>-</h6>
|