VUE项目创建
创建vue项目
# 来到相对应的目录
vue create 项目名;
// 选择自定义创建项目, 选取Router, Vuex插件
# 启动命令/停止项目
npm run serve / ctrl + c
# 打包项目
npm run build
认知项目
node_modules: 项目依赖
public: 共用资源
src: 项目目标, 书写代码的地方
- assets: 资源 (先清空)
-commponents: 组件 (写小组件的地方,如头尾,等.)
-views: 视图文件 (写一个个的视图)
-APP.vue: 根组件
-main.js: 入口js (项目启动的地方)
-router.js: 路由文件 (没新建一个视图创建一个项目)
vue.config.js: 项目配置文件.
了解项目
1. APP.vue: 提供一个视图组件占位符,占位符被哪个views下的视图组件替换,浏览器就显示哪个视图.
2.如果你想要在视图里使用小组件,需要在components下面注册小组件的名字.
3.组件的生命周期钩子
-一个组件,会在页面中渲染,也会销毁存放到内存(不渲染) => 加载组件到销毁组件
-从加载一个组件开始,它的生命周期就开始了,它的生命中存在很多的时间节点
-(组件要创建了 -- 创建成功了 -- 要加载了 -- 加载成功了 -- 要更新数据了 -- 数据更新完成了--
要销毁了 -- 销毁成功了)
4.假如要跳转到一本书籍的详情信息页面,那么当你点击的时候你要获取到这本书籍的id信息.
- 在data里定义一个空的book字典.
- 通过created()他表示组件加载后,我们可以从这里面获取到id
- let pk = this.$route.params.pk; 这样就可以拿到书籍的id
- this.book = book_detail[pk]; 在保存进去