Vue.js - Basic

Vue-CLI

Vue-CLI 是 Vue 的命令行工具，可以快速開發大型單頁應用程式 (SPA)。

主要是提供開發者一個快速建置 Vue.js 架構的工具，

並基於 webpack，提供了許多相關的功能、套件安裝協助。

安裝 Node.js

官網：https://nodejs.org/en/

確認一下裝好了

 $ node -v

透過 npm 全局安裝 Vue - CLI

 $ sudo npm install -g @vue/cli

for Windows

for Mac

 $ npm install -g @vue/cli

確認一下裝好了

 $ vue

Start a project.

建立專案

 $ vue create <your-project-name>

初始設定

 Vue CLI v4.5.6
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

Default：會一步直接開始建構
Manually：自己手動選擇需要的工具

初始設定 - 2

 Vue CLI v4.5.6
? 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

Babel, Router, Vuex, Linter, Unit

初始設定 - 3

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

使用 Router 歷史記錄模式

初始設定 - 4

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

選擇 ESLint + Prettier

初始設定 - 5

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

選擇 Lint on save

初始設定 - 6

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution:
  Mocha + Chai
❯ Jest

選擇 Jest

初始設定 - 6

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

選擇 In dedicated config files

初始設定 - 7

 Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? (y/N)

是否將上述配置儲存到 preset 的 default

初始設定 - 8

  DONE  Compiled successfully in 18073ms
 
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.11:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.

運行專案項目

 $ cd <your-project>
$ npm run serve

打開瀏覽器

我們開發只需要關注 src 的資料夾即可，其他的部分目前可以先放著沒關係。

 ├── README.md
├── babel.config.js
├── node_modules
│   ├──...
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

 import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App)
}).$mount('#app')

main.js

 <template>
  <div id="app">
    ...
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
...
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  ...
}
</style>

	<！-開發環境版本，包含了有幫助的命令行警告->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<！-生產環境版本，優化了尺寸和速度->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	}
	})

	<!DOCTYPE html>
	<html>
	<head>
	<title>My first Vue app</title>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<div id="app">
	{{ message }}
	</div>

	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	}
	})
	</script>
	</body>
	</html>

	Vue.component('prompt-component', {
	template: '<div><p>{{message}}</p><button @click="sayHi">Say Hi!</button></div>',
	data: function () {
	return {
	message: 'Hello World!'
	}
	},
	methods: {
	sayHi: function() {
	alert('Hi');
	}
	}
	})

	var vm = new Vue({
	el: '#app',
	});

	var Prompt = {
	template: '<div><p>{{ message }}</p><button @click="sayHi">Say Hi!</button></div>',
	data: function () {
	return {
	message: 'Hello World!'
	}
	},
	methods: {
	sayHi: function() {
	alert('Hi');
	}
	}
	};

	var vm = new Vue({
	el: '#app',
	components: {
	'prompt-component': Prompt
	}
	});

	Vue CLI v4.5.6
	? Please pick a preset:
	Default ([Vue 2] babel, eslint)
	Default (Vue 3 Preview) ([Vue 3] babel, eslint)
	❯ Manually select features

	Vue CLI v4.5.6
	? 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

	DONE Compiled successfully in 18073ms


	App running at:
	- Local: http://localhost:8080/
	- Network: http://192.168.0.11:8080/

	Note that the development build is not optimized.
	To create a production build, run npm run build.

	├── README.md
	├── babel.config.js
	├── node_modules
	│ ├──...
	├── package-lock.json
	├── package.json
	├── public
	│ ├── favicon.ico
	│ └── index.html
	└── src
	├── App.vue
	├── assets
	│ └── logo.png
	├── components
	│ └── HelloWorld.vue
	└── main.js

	import Vue from 'vue'
	import App from './App.vue'

	Vue.config.productionTip = false

	new Vue({
	render: h => h(App)
	}).$mount('#app')

	<template>
	<div id="app">
	...
	</div>
	</template>

	<script>
	import HelloWorld from './components/HelloWorld.vue'
	...
	</script>

	<style>
	#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	...
	}
	</style>

	Vue.component('my-component-name', {
	// ... options ...
	})

Before we start.