VUE项目创建

Posted 2020-11-22 kangwy

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]; 在保存进去