You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Base on the the [Jayway's Vue.js 2.0 workshop](https://jayway.github.io/vue-js-workshop/), this document describes the steps to scaffold a TypeScript Vue project and add more components to create a structure for non-trivial projects.
5
+
Based on the the [Jayway's Vue.js 2.0 workshop](https://jayway.github.io/vue-js-workshop/), this project upgrades it to contain
6
+
* Webpack 2
7
+
* Hot reloading
8
+
* vue-loader for .vue files
9
+
* Typescript 2.0
6
10
7
-
Build Setup
11
+
# Usage
12
+
## vue-cli
13
+
This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). It can be downloaded using:
The following are step-by-step instructions to create the project from scracth.
21
-
22
-
## 1. Scaffold a Project
23
-
Run `npm install -g vue-cli` to install vue-client. If you already have it, run `npm update -g vue-cli` to update it to the latest version. You may need to use `sudo` to install it as a global package.
24
-
25
-
### 1.1. Initialize a Vue Project
27
+
## Manual clone
28
+
After cloning this repository, you can get started with:
26
29
27
-
Run `vue init webpack typescript-vue-example` to create a new project named `typescript-vue-example`. To make it simple, don't setup ESLint, unit test and e2e tests.
28
-
29
-
Run the following commandto see it is up and running at http://localhost:8080/, type `ctrl-C` to exit.
30
-
31
-
```sh
32
-
cd typescript-vue-example
30
+
```bash
31
+
# install dependencies
33
32
npm install
34
-
npm run dev
35
-
```
36
-
37
-
### 1.2. Use TypeScript Instead of Babel
38
-
We use TypeScript go generate all JavaScript ES5 code, therefore there is no need to to use Bable in this project. In `package.json`, remove all lines having a "babel" prefix.
39
-
40
-
Then install `typescript` and `ts-loader` packages. `ts-loader` works with `vue-loader` (installed by `vue-cli` in project intialization) to process TypeScript code in a `vue` file.
41
-
42
-
```sh
43
-
npm i -D typescript
44
-
npm i -D ts-loader
45
-
```
46
-
47
-
### 1.3. Config Webpack Loaders
48
-
To use the `typescript` and `ts-loader`, we need to configure both TypeScript and Webpack.
49
-
50
-
### 1.3.1. Config TypeScript
51
-
Create a `tsconfig.json` file in the project root folder with the following contents:
52
-
53
-
```json
54
-
{
55
-
"compilerOptions": {
56
-
"target": "es5",
57
-
"lib": ["es5", "es2015.promise", "dom"]
58
-
}
59
-
}
60
-
```
61
-
62
-
In the above file, we set the generate JavaScript code in `es5` syntax. We also need the `es5` and `es2015.promise` libs to compile TypeScript code.
63
-
64
-
### 1.3.2. Config Webpack
65
-
Edit `build/webpack.base.conf.js` to have the following changes:
66
-
67
-
```js
68
-
// 1. change the entry to a .ts file
69
-
entry: {
70
-
app:'./src/main.ts'
71
-
},
72
-
73
-
// 2. add resolve extensions for '.ts'
74
-
resolve: {
75
-
extensions: ['', '.js', '.vue', '.ts'],
76
-
// ...
77
-
}
78
-
79
-
// 3. in "module: { loaders: []", replace the "bable loader for js test" to "ts-loader for ts test"
// 5. append a ".ts" file to all ".vue" file thus typescript can preprocess the file
97
-
ts: {
98
-
appendTsSuffixTo: [/\.vue$/]
99
-
}
100
-
```
101
-
102
-
## 2. Convert JavaScript Code to TypeScript
103
-
The good news is that Vue npm package comes with type definitions and we can have type checking and editing help. However, the import syntax is different in TypeScript.
104
-
105
-
First, Change the `<script>` tag in `src/App.vue` and `src/components/Hello.vue` as `<script lang="ts">` for the `ts-loader` to work.
106
-
107
-
Then rename the entry file `src/main.js` as `src/main.ts` and edit it to have the following content:
108
-
109
-
```ts
110
-
import*asVuefrom'vue'
111
-
importAppfrom'./App'
112
-
113
-
/* eslint-disable no-new */
114
-
newVue({
115
-
el: '#app',
116
-
render: h=>h(App)
117
-
})
118
-
```
119
-
120
-
To verify the changes, run the project with command `npm run dev`. You should see a page served on `http://localhost:8080/` if we make the right changes.
121
-
122
-
## 3. Create a Product List Component
123
-
Delete the `src/components/Hello.vue` file and create a `src/components/ProductList.vue` file with the following content:
124
-
125
-
```html
126
-
<template>
127
-
<tableclass="table table-hover">
128
-
<thead>
129
-
<tr>
130
-
<th>Product Id</th>
131
-
<th>Name</th>
132
-
<th>Description</th>
133
-
<th>Price</th>
134
-
</tr>
135
-
</thead>
136
-
<tbody>
137
-
<trv-for="product in products"track-by="id">
138
-
<td>{{product.id}}</td>
139
-
<td>{{product.name}}</td>
140
-
<td>{{product.description}}</td>
141
-
<td>{{product.price}}</td>
142
-
</tr>
143
-
</tbody>
144
-
</table>
145
-
</template>
146
-
147
-
<scriptlang="ts">
148
-
exportdefault {}
149
-
</script>
150
-
```
151
-
152
-
In the above `ProductList.vue` file, though we don't have anything for for the `<script>` section, for TypeScript to work, we let it export an empty object.
153
-
154
-
Then change the `App.vue` as the following to use the new product list component.
155
-
156
-
```ts
157
-
<template>
158
-
<product-list></product-list>
159
-
</template>
160
-
161
-
<scriptlang="ts">
162
-
importProductListfrom'./components/ProductList'
163
-
164
-
exportdefault {
165
-
name: 'app',
166
-
components: {
167
-
ProductList
168
-
}
169
-
}
170
-
</script>
171
-
```
172
33
173
-
Run `npm run dev` to check that the site is up and running correctly.
174
-
175
-
## 4. Use BootStrap 4 Styles
176
-
We use BootStrap 4 alpha to style the page. We may see the final release in our life time.
Import the standard bootstrap style by adding the following contents to `main.js`.
197
-
198
-
```js
199
-
// import some global styles
200
-
import'./styles/style.scss'
201
-
```
202
-
203
-
Run `npm run dev` to check that the site is up and running correctly.
204
-
205
-
## 5. Create a State Store
206
-
To make the project scalable, We use modules to manage the store for different parts of an application. In the `src/store` folder, we define types for all store modules. Each module has a type file.
207
-
208
-
### 5.1. Install `vuex`
209
-
Run `npm i -S vuex` to install the Vue state store plugin.
210
-
211
-
### 5.3. Create Type Constants
212
-
Create `src/store/products-types.ts` file as the following:
213
-
214
-
```js
215
-
exportconstGET_PRODUCTS='products/GET_PRODUCTS'
216
-
```
217
-
218
-
The reason that we create this file is that there will be a types file for each store module.
219
-
220
-
## 5.3. Create the `getProducts` Getter
221
-
Create `src/store/modules/products/getters.ts` as the following:
For a non-trivial project, there will be getters, mutations, and actions and each type will be in one or more file.
234
-
235
-
### 5.4 Create the Products Store Module
236
-
Create `src/store/modules/products/index.ts` with the following content:
237
-
238
-
```ts
239
-
import { getters } from'./getters'
240
-
241
-
const initialState = {
242
-
products: [
243
-
{
244
-
id: '001',
245
-
name: 'COBOL 101 vintage',
246
-
description: 'Learn COBOL with this vintage programming book',
247
-
price: 399,
248
-
},
249
-
{
250
-
id: '007',
251
-
name: 'Sharp C2719 curved TV',
252
-
description: 'Watch TV like with new screen technology',
253
-
price: 1995,
254
-
},
255
-
{
256
-
id: '719',
257
-
name: 'Remmington X mechanical keyboard',
258
-
description: 'Excellent for gaming and typing',
259
-
price: 595,
260
-
}
261
-
]
262
-
}
263
-
264
-
exportdefault {
265
-
state: {
266
-
...initialState
267
-
},
268
-
getters
269
-
}
270
-
```
271
-
272
-
This is the module-levle store file that exposes all module states and methods.
273
-
274
-
### 5.5. Add the Store to the Root Instance
275
-
In `src/main.ts`, import the newly created store and add it to the root instance option. After this, all child components can access the store.
276
-
277
-
```ts
278
-
declarelet process:any
279
-
280
-
import*asVuefrom'vue'
281
-
import*asVuexfrom'vuex'
282
-
283
-
importproductsfrom'./modules/products'
284
-
285
-
Vue.use(Vuex)
286
-
287
-
const debug =process.env.NODE_ENV!=='production'
34
+
# serve with hot reload at localhost:8080
35
+
npm run dev
288
36
289
-
exportdefaultnewVuex.Store({
290
-
modules: {
291
-
products
292
-
},
293
-
strict: debug
294
-
})
37
+
# build for production with minification
38
+
npm run build
295
39
```
296
40
297
-
This is the root-level store file that exposes all store modules.
298
-
299
-
### 5.6. Use the Store in ProductList Component
300
-
to get products data from the store using a computed property, change the content of `<script lang="ts"> </script>` of the `src/components/ProductList.vue` fiel as the following:
301
-
302
-
```ts
303
-
<scriptlang="ts">
304
-
import*asVuexfrom'vuex'
41
+
# Commands
305
42
306
-
import*astypesfrom'../store/products-types'
307
-
308
-
exportdefault {
309
-
computed: Vuex.mapGetters({
310
-
products: types.GET_PRODUCTS
311
-
})
312
-
}
313
-
</script>
314
-
```
43
+
*`npm run install`: Installs project dependencies
44
+
*`npm run dev`: Development build
45
+
* Webpack files
46
+
* Launches site on localhost:8080
47
+
* State preserving Hot reload
48
+
* Source maps
49
+
* Compiles typescript
315
50
316
-
In the above code, we map the `types.GET_PRODUCTS` getter meethod to a local computed property with a name `products`.
51
+
*`npm run build`: Production build
52
+
* Webpack files
53
+
* Bundles project into ./dist
54
+
* Ready for deployment
317
55
318
-
Run `npm run dev` to check that the site is up and running correctly.
56
+
# License
57
+
See the license file in the root of the repository
"completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev{{/inPlace}}"
0 commit comments