文章目录
4【项目】旺财 Vue 项目搭建
4.1 课前准备
4.2 使用@vue/cli创建项目
4.3 目录结构说明
目录:
public: 一般不会变动
src: 源代码source的简写src
assets(资源):除了HTML, CSS, JS, TS都放在这里. 比如图片, svg
components: 只放组件
router: 用来放路由
store:
views: 来放视图的
App.vue: 整个应用的视图
Main.ts: 入口文件, 主要功能来渲染App
registerServiceWorker.ts: 与PWA相关
shims-tsx.d.ts: TS相关的
shims-vue.d.ts: TS相关的
tests: 测试相关
下面都是配置文件
tsconfig.json: TS配置
vue.config.js: webpack配置
4.4 添加代码片段snippets
编辑器的配置:
- webstorm修改默认的vue模版
4.5 JS或TS里使用@
4.6 CSS或SCSS里使用~@
选择no, 我们在webpack配置不在webstorm配置
可以执行, 视频中的webstorm有红线, 自己的最新的2020.2的webstorm修复了这个bug.
5【项目】旺财 Vue 导航栏
5.1 使用VueRouter
HEAD表示当前版本
git reset --hard HEAD
默认直接找到router目录下的index.ts
import router from './router'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//等价
new Vue({
router: router,
store,
render: h => h(App)
}).$mount('#app')
lint-staged用来检测代码是否出错
control
+tab
切换文件
5.2 讲Nav组件做成全局组件
首先考虑到直接将三个导航按钮写入到App.vue中, 要是有些页面不需要三个导航按钮呢.
因此, 需要将这三个导航按钮抽象成一个组件, 这样直接给Money.vue, Labels.vue和Statistics.vue引用
然后发现相同的代码引用了3次, 为啥不直接全局引用到main.ts中呢
自己练习过程中就是不断试错的过程, 需要自己把坑都走过了, 知道哪有坑就走的顺畅了.
拒绝直接给标准答案的方式教学
可以右击项目文件夹后, git commit
5.3 VueRouter 404页面
路由没有已知的页面, 就跳转到404
5.4 用Fixed还是Flex布局
@@@
千万别在手机上用Fixed
@@经验, 忠告@
加scoped后, 对应的class地方的标签出会出现data-v-xxxxx,
自动会在写该class的时候加上该部分(属性选择器)
<template>
<div class="nav" data-v-xxxx>
<router-link to="/money">记账</router-link>|
<router-link to="/labels">标签</router-link>|
<router-link to="/money">统计</router-link>
</div>
</template>
<script lang="ts">
export default {
name: 'Nav'
};
</script>
<style lang="scss">
.nav[data-v-xxxx]{
border: 1px solid red;
}
</style>
等价于直接加scope
<template>
<div class="nav">
<router-link to="/money">记账</router-link>|
<router-link to="/labels">标签</router-link>|
<router-link to="/money">统计</router-link>
</div>
</template>
<script lang="ts">
export default {
name: 'Nav'
};
</script>
<style lang="scss">
.nav{
border: 1px solid red;
}
</style>
@@@
只要能加scoped的地方都需要加, App.vue除外
@@经验, 忠告@
@@@
复