vue-cli4脚手架搭建二
Posted perfei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli4脚手架搭建二相关的知识，希望对你有一定的参考价值。
vue create vue3
cd vue3
yarn serve
main.js文件
import Vue from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘ Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount(‘#app‘)
render: h => h(App) 这一行是ES6箭头函数的写法，等价于下面的写法
render:function(h){
return h(App);
}
将App作为参数传入h函数
App.vue是组件的入口
<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template>
<router-view/>是组件内容显示的区域，一个组件只能有一个<router-view/>标签
router-link 是组件路由，按路径的不同，显示不同的组件
路由切换：上个组件销毁和新组件加载
由main.js文件中 import router from ‘./router‘ 引入路由
main.js是项目的入口，也在main.js中完成Vue的初始化
new Vue({ router, render: h => h(App) }).$mount(‘#app‘)
运行项目看到的区域是App.vue的<router-view/>标签，App.vue是组件的入口，也可以说是视图的入口；点击不同的路径，会更换<router-view/>标签的内容
router/index.js
vue的中视图就是组件，路由由三部分组成：
url
名称：可以有，也可以没有
组件
这里的Home，是引入的Home.vue组件 import Home from ‘../views/Home.vue‘
/about的组件是懒加载
const routes = [ { path: ‘/‘, name: ‘Home‘, component: Home }, { path: ‘/about‘, name: ‘About‘, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘) } ] const router = new VueRouter({ routes }) export default router
先看About.vue组件，这是一个非常简单的组件
<template> <div class="about"> <h1>This is an about page</h1> </div> </template>
几个html dom元素，然后最外层是template标签；一个template标签内放一个div标签，就可形成一个组件。也是常见的html模板语法。
复杂一些的组件，会有更多的dom元素，为了更好地渲染这些dom元素，还会加入css样式/JS脚本,比如Home.vue组件
将一个组件命名并供外部使用
<template> <div> ... </div> </template>
<script> export default { name: ‘HelloWorld‘, } </script>
在另外一个组件中使用时，需要import
<scripts> // @ is an alias to /src import HelloWorld from ‘@/components/HelloWorld.vue‘ </scripts>
CSS样式全局导入
<template> <div id="app"> <!-- 路由展示--> <div></div>打 <!-- 底部导行--> <div></div> </div> </template> <style> /*全局导入CSS样式*/ @import "./assets/css/index.css"; </style>
CSS样式私有导入，仅当前组件生效
<style scoped> /*全局导入CSS样式*/ @import "./assets/css/index.css"; </style>
路由样式
router/index.js
const router = new VueRouter({ linkActiveClass:‘active‘, routes })
然后定义一个全局的样式
<style>
.active {
color:rebeccapurple;
}
</style>
动态样式
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <div class="index-category"> <!--key指定唯一键，实时渲染--> <div class="category" v-for="(list,i) in lists":key="i"> <i class="iconfont" :style="{background:list.color}"></i> <label>{{list.title}}</label> </div> </div> </div> </template> <script> export default { name: ‘Home‘, data(){ return { lists:[ {title:‘标题1‘,color:‘#ffbb78‘}, {title:‘标题2‘,color:‘#b5cf6b‘}, {title:‘标题3‘,color:‘#4169e1‘} ] } } } </script>
vue中的花括号
<label>{{list.title}}</label> 标签中写上双花括号，里面是js表达式
v-for="(list,i) in lists":key="i" 对于 vue指令，不需要写花括号，直接就可以写js表达式
:style="{background:list.color}" 这里写上一个花括号，是因为里面是一个键值对 对象，js中定义键值的对的方式，比如 let data = {name:"zhangsan"}，js对象本身带一个花括号
未完...
以上是关于vue-cli4脚手架搭建二的主要内容，如果未能解决你的问题，请参考以下文章