Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
# Node and npm environement:
Updated and tested with latest dependencies using node 18.12.1 and npm 8.19.2
# Vue Client app
# Vite CLI version 4.2.3
# FormKit version 0.17.2
# DaisyUI version 2.51.6
# TailwindCSS version 3.3.2
# Kindly do rename yor application in package.json name
# Pre-requisite
- NPM and/or Yarn installed
# Steps
- Install vue cli 3 [VUE CLI 3](https://cli.vuejs.org/guide/installation.html)
```sh
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# Check using
vue --version
```
- Navigate to project client/app and execute
```sh
npm install
```
- execute below command it start browser which help for run, build, testing etc
```sh
vue ui
```
- You can also use cmd for executing
```sh
"serve": "vite",
"build": "vite build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
```
- once vue ui started click on import and add your app (it emit error if node_module not installed )
- go to tasks menu and click on Serve (for running app)
- Other option like build , analyzer, plugin installation etc.
- You can also updating serve execution script in package.json by adding
```sh
Usage: vue-cli-service serve [options] [entry]
Options:
--open open browser on server start
--copy copy url to clipboard on server start
--mode specify env mode (default: development)
--host specify host (default: 0.0.0.0)
--port specify port (default: 8080)
--https use https (default: false)
```
VSCode Setting:
Install eslint extension
This is for vue client application formatting you can add your other plugins related to Golang, Python, todo Highlight, theme etc
{
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"workbench.colorTheme": "Visual Studio Dark",
"nativescript.analytics.enabled": false,
"window.zoomLevel": 0,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
}
Ctrl + S => shall format your code (multiple save action may require)
```
-- edit: .eslintrc.js file update "plugin:vue/recommended" to "plugin:vue/strongly-recommended"
-- edit: .eslintignore file add update src/* to src/*.js
-- run: npm run lint and resolve the issue you are facing refer : https://vuejs.github.io/eslint-plugin-vue/rules/
```
# Gulp task for 'en.json' and 'dv.json' creation
Note: 'dv.json' is created for identifying which labels or places are left/skipped by developers for i18n changes.
Steps To perform:-
1. While doing i18n, developers should do it with following mentioned pattern:-
i. If i18n is done in curly braces like :-
<button>{{ $t('btn_confirm') }}</button>
Then it should be done with pattern:-
<button>{{ $t('##btn_confirm##@@Confirm@@') }}</button>
ii. If i18n is done at attribute level in element like :-
<button :label="$t('btn_confirm')"></button>
Then it should be done with pattern:-
<button :label="$t('##btn_confirm##@@Confirm@@')"></button>
iii. If i18n is done at script level like :-
this.$toast.error(this.$t('invalidUsername'), {
theme: 'bubble',
duration: 6000
})
Then it should be done with pattern:-
this.$toast.error(this.$t('##invalidUsername##@@User name is invalid@@'), {
theme: 'bubble',
duration: 6000
})
2. After this just run command 'npm run geni18n'
3. This will create backup of current 'en.json'
4. Create new 'en.json' and 'dv.json'
5. Further the 'en.json' can be used to do i18n in any language at 'https://cs.mkcl.org'