- 크롬 확장프로그램(chrome://extensions/) > 압축해제된 확장 프로그램을 로드합니다. 클릭
- 아래 ./vue-csp 폴더 선택
- 크롬 앱 목록(chrome://apps/)에서 설치한 앱 선택
- 새창에 앱이 실행된다.
./vue-csp assets/ app.js vue.js # https://github.com/vuejs/vue/tree/csp/dist icon_16.png icon_128.png index.html main.js manifest.json
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-CSP compliant</title>
</head>
<body>
<div id="app">
<h1>{{ message}} </h1>
</div>
<script src="assets/vue.js"></script>
<script src="assets/app.js"></script>
</body>
</html>
main.js
chrome.app.runtime.onLaunched.addListener(function() {
// 화면중심에 윈도우를 위치시킨다.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create("index.html", {
id: "learningVueID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
});
manifest.json
{
"manifest_version" : 2,
"name" : "Learning Vue.js",
"version" : "1.0",
"minimum_chrome_version": "23",
"icons": {
"16": "icon_16.png",
"128" : "icon_128.png"
},
"app" : {
"background": {
"scripts": ["main.js"]
}
}
}
assets/app.js
var data = {
message: "Learning Vue.js"
};
new Vue({
el: "#app",
data: data
})반응형
'lang > vue' 카테고리의 다른 글
| Vue.js Tutorials Todos (0) | 2019.04.10 |
|---|---|
| sdras(Sarah Drasner) Introduction Vue.js (0) | 2019.04.05 |
| Vue Mastery Free Lecture (0) | 2019.02.15 |