TodoList ਇੱਥੇ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਖਾਸ ਕੋਡ ਉਦਾਹਰਨਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਕਦਮ-ਦਰ-ਕਦਮ ਗਾਈਡ ਹੈ Vue.js:
ਕਦਮ 1: ਪ੍ਰੋਜੈਕਟ ਸਥਾਪਤ ਕਰਨਾ
Vue.js Vue CLI ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਕੇ ਸ਼ੁਰੂ ਕਰੋ । ਆਪਣਾ ਟਰਮੀਨਲ ਖੋਲ੍ਹੋ ਅਤੇ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ:
todo-list-app
ਇਹ ਮੂਲ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਅਤੇ ਨਿਰਭਰਤਾਵਾਂ ਦੇ ਨਾਲ ਇੱਕ ਨਵੀਂ ਡਾਇਰੈਕਟਰੀ ਬਣਾਏਗਾ ।
ਕਦਮ 2: ਬਣਾਉਣਾ TodoList Component
ਫੋਲਡਰ ਦੇ ਅੰਦਰ src
, ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ TodoList.vue
। ਇਹ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਮੁੱਖ ਭਾਗ ਹੋਵੇਗਾ TodoList ।
ਵਿੱਚ TodoList.vue
:
ਕਦਮ 3: ਬਣਾਉਣਾ TodoItem Component
ਫੋਲਡਰ ਦੇ ਅੰਦਰ src
, ਨਾਮ ਦੀ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ TodoItem.vue
। ਇਹ ਵਿਅਕਤੀਗਤ ਟੂਡੂ ਆਈਟਮਾਂ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਇੱਕ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟ ਹੋਵੇਗਾ।
ਵਿੱਚ TodoItem.vue
:
ਕਦਮ 4: ਅੱਪਡੇਟ ਕਰਨਾ TodoList Component
.vue ਦੇ ਅੰਦਰ, v-for ਡਾਇਰੈਕਟਿਵ ਦੀ ਵਰਤੋਂ ਕਰਕੇ s ਨੂੰ TodoList ਰੈਂਡਰ ਕਰਨ ਲਈ ਟੈਮਪਲੇਟ ਸੈਕਸ਼ਨ ਨੂੰ ਅੱਪਡੇਟ ਕਰੋ । TodoItem
ਵਿੱਚ TodoList.vue
:
ਕਦਮ 5: TodoList ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨਾ
ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ TodoList, "src/App.vue" ਫਾਈਲ ਖੋਲ੍ਹੋ ਅਤੇ ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕੋਡ ਨਾਲ ਬਦਲੋ:
ਕਦਮ 6: ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਚਲਾਉਣਾ
ਟਰਮੀਨਲ ਵਿੱਚ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾ ਕੇ ਸਾਰੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ ਅਤੇ ਵਿਕਾਸ ਸਰਵਰ ਨੂੰ ਚਾਲੂ ਕਰੋ:
ਕਾਰਜ ਨੂੰ ਅਮਲ ਵਿੱਚ http://localhost:8080
ਵੇਖਣ ਲਈ ਆਪਣੇ ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਜਾਓ । TodoList
ਇਹ ਉਦਾਹਰਨ a ਦੀ ਬੁਨਿਆਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ
TodoList ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਐਪਲੀਕੇਸ਼ਨ Vue.js. ਉਪਭੋਗਤਾ ਟੂਡੂ ਆਈਟਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਵੇਖ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਪੂਰਾ ਹੋਇਆ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਮਿਟਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੀਆਂ ਆਈਟਮਾਂ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਨ। ਟੂਡੋ ਆਈਟਮਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ TodoList ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਪ੍ਰਬੰਧਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਹਰੇਕ ਵਿਅਕਤੀਗਤ ਟੂਡੋ ਆਈਟਮ ਨੂੰ TodoItem ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਇੱਕ ਸਰਲ ਲਾਗੂਕਰਨ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਆਪਣੀਆਂ ਖਾਸ ਲੋੜਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਹੋਰ ਵਿਉਂਤਬੱਧ ਅਤੇ ਵਧਾ ਸਕਦੇ ਹੋ।