Let's talk about frontend with Vue.js and Typescript
What is TypeScript?
TypeScript is a pre-compiling language related to JavaScript. All codes are to be compiled to JavaScript necessarily for running in Web. You can not only use latest ES6 scripts of JavaScript in TypeScript but also define types for variables and functions, and define interfaces or types like using traditional strong-type languages. It could be a good language to make sure the data types in projects for teams.
Vue.js and Native HTML5
Nowadays, there are many ways and frameworks to building up a web frontend system, such as React, AngularJS, Vue.js and so on. It is definitely able to build up a system using native HTML5 with JavaScript, but usually using a good framework can implement the system with a beautiful design pattern for structure and security.
A tool or frameworks be created is usually because of the difficulties developers have at that moment. For example, jQuery was created for using JavaScript on different browsers that supported different standards, and it was the first one library to beable control DOM (Document Object Modal) .The HTML5 querySelector now copied this cool functionality.
Compare to native HTML5 JavaScript (or jQuery) which operate DOM directly, Vue.js has its own View Model to modify DOM when getting new data model. In other words, we can focus on data and structure rather then design our own modal and operating DOM directly. Both ways are good for different scenarios but Vue.js actually provides a easier route to build up a web frontend.
How to use Vue.js
There are two ways to use the framework Vue.js.
Import into your HTML files direclty
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Start using it to monitor your DOM and data, then you can see a "Hello Vue!"on your HTML page. Besides, you can control the data property "seen"with a boolean value to show or hide the message automatically. We will recommend the beginner to using this way for learning Vue.js
<div id="app" v-if="seen">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
Using NPM (Node Package Management) tools
When JavaScript becomes more and more popular in the world. NPM also becomes the biggest management system for package repositories made by Node.js. NPM tools which can manage a lot of useful frameworks in a NPM package for developers to build up a web system is also a good way to install Vue package ' @vue-cli '.
Nowadays, there are many ways and frameworks to building up a web frontend system, such as React, AngularJS, Vue.js and so on. It is definitely able to build up a system using native HTML5 with JavaScript, but usually using a good framework can implement the system with a beautiful design pattern for structure and security.
A tool or frameworks be created is usually because of the difficulties developers have at that moment. For example, jQuery was created for using JavaScript on different browsers that supported different standards, and it was the first one library to beable control DOM (Document Object Modal) .The HTML5 querySelector now copied this cool functionality.
Compare to native HTML5 JavaScript (or jQuery) which operate DOM directly, Vue.js has its own View Model to modify DOM when getting new data model. In other words, we can focus on data and structure rather then design our own modal and operating DOM directly. Both ways are good for different scenarios but Vue.js actually provides a easier route to build up a web frontend.
How to use Vue.js
There are two ways to use the framework Vue.js.
Import into your HTML files direclty
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Start using it to monitor your DOM and data, then you can see a "Hello Vue!"on your HTML page. Besides, you can control the data property "seen"with a boolean value to show or hide the message automatically. We will recommend the beginner to using this way for learning Vue.js
<div id="app" v-if="seen">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
Using NPM (Node Package Management) tools
When JavaScript becomes more and more popular in the world. NPM also becomes the biggest management system for package repositories made by Node.js. NPM tools which can manage a lot of useful frameworks in a NPM package for developers to build up a web system is also a good way to install Vue package ' @vue-cli '.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" v-if="seen">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
Install @vue/cli from NPM system using CLI (Command Line in terminal)
=> npm install -g @vue/cli
Create Vue Project
=> vue create hello-world
4 Manually select tools in your project
- Please only select TypeScript (long time age, setting TS for Vue was frustrated T_T)
- then you can have a new project with complete setting with TypeScript and Vue.js automatically
How to use Vue
In the project, you just built up with @vue-cli , and the content is totally different from what you did in HTML files. You will not see the HTML files at all but only ".vue"files in the projects' "/src folder. All the native HTML5 files such HTML, JavaScript, and CSS would be integrated into the ".vue"file as the image shown.
Run you project
=> npm run serve
Who we are
Vacan, Inc. 주식회사 바칸
- htps //w w.ゔ 칸코 rp. 코m/
- htps // p 로즈 ct.ゔ 칸코 rp. 코m/
중국현지법인 공탐과기(상해) 유한공사
- htps //w w. 안녕하세요 ch. c/
Vacan, Inc. Wantedly
- htps //w w. 와서 dly. 코 m / 코 m 파니에 s / ゔ 칸코 rp
References:
Reference
이 문제에 관하여(Let's talk about frontend with Vue.js and Typescript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kueiapp/items/c9b9970ca562a1bdf286텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)