Day14-Vue CLI 介绍

他是Vue.js官方提供的开发工具,可以快速的建置架构,常用於制作单页应用(SPA)网站。

安装

  1. 安装Node.js(官网https://nodejs.org/zh-tw/download/),终端机输入node -v,有出现版本数字就代表安装成功
  2. 安装Vue CLI,在终端机输入 npm install -g @vue/cli,完成後输入vue -V就会出现@vue/cli 4.5.13,安装就完成啦!!

建立专案

  1. 终端机输入vue create [专案名称]
  2. 进入初始设定的画面,选择手动设定Manually select features
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)     
> no1 ([Vue 3] dart-sass, babel, typescript) 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint)    
  Manually select features
  1. 如果要使用Vue 3.x版本的话就一定要勾选Choose Vue version,其他的就依照使用习惯勾选
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  1. 选择存放的地方,一般都是放package.json,也可以自行选择要存放的位置dedicated config files
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  1. 安装完成後会出现Successfully created project
  2. 在终端机下cd [专案名称]指令与npm run serve启动专案
App running at: 
- Local: http://localhost:8080/ 
  1. 进入http://localhost:8080/ 看到下面的画面代表专案建置成功!!!!

Untitled


<<:  [Day 14] Delete 删除资料

>>:  Day 14 来看一下hook是如何测试的 初阶版

Day 12 JavaScript var vs let (2)

今天介绍 JS 内 var 与 let 的後两点差异。 执行环境 Execution Context...

[DAY30]从上船到沉船30天心得

铁人30天心得 前言 k8s真的好硬rrrrr,写了30天,感觉才不到k8s 1%的内容,加上k8s...

AWS Lambda 搭配 Amazon API Gateway

AWS Lambda 搭配 Amazon API Gateway AWS Lambda 是一种无服务...

DAY03 环境建构(Anaconda + Jupyter Notebook)及套件工具安装

所谓"工欲善其事,必先利其器",我们需要一个强大的工具来辅助我们进行资料分析,今...

参考监视器的非必需属性-高凝聚力(High cohesion)

-安德森报告和TCSEC 1972年,James P. Anderson&Co.在着名的Ander...