[30天 Vue学好学满 DAY3] 专案建置&除错套件

前置作业安装

node
vue
vue-cli

vue-cli(Vue.js Command-Line Interface)

• 快速搭建专案的指令
• 内建Hot-Reload、ES Lint 与 dev-Server...
• 整合了webpack
  -> 立即建立可用的专案、环境

创建指令: vue create [project_name]

vue create hello-world

-> 选择版本: 这里选择 [Vue 2] babel, eslint
->安装完成後cd进目录

cd hello-world

-> 启动方式

// vue 3
yarn serve

->启动测试: http://localhost:8080

Vue Devtools

vue专属除错工具，可透过Chrome扩充安装
https://devtools.vuejs.org/guide/installation.html

且可透过发者模式查看

• Components:查看、调整组件，可做测试。
• Vuex:全域参数个状态。
• Events:各事件及其来源。
• Routing:路由的变化。
• Performance:效能检视。
• Setting、Refresh

有错误请不吝指教!
参考资料
https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
https://zhuanlan.zhihu.com/p/68278113