Nuxt.js પ્રોજેક્ટ ઇન્સ્ટોલ અને રૂપરેખાંકિત કરી રહ્યા છીએ
Node.js ઇન્સ્ટોલ કરો
ખાતરી કરો કે તમે તમારા કમ્પ્યુટર પર Node.js ઇન્સ્ટોલ કરેલ છે. તમે અધિકૃત Node.js વેબસાઇટ પરથી નવીનતમ સંસ્કરણ ડાઉનલોડ કરી શકો છો.
Vue CLI ઇન્સ્ટોલ કરો
Vue CLI ઇન્સ્ટોલ કરવા માટે તમારો Terminal અથવા Command Prompt નીચેનો આદેશ ચલાવો(જો પહેલેથી ઇન્સ્ટોલ કરેલ ન હોય તો):
npm install -g vue-cli
Nuxt.js એક પ્રોજેક્ટ બનાવો
માં Terminal, ડિરેક્ટરી પર નેવિગેટ કરો જ્યાં તમે તમારો પ્રોજેક્ટ બનાવવા માંગો છો અને પ્રોજેક્ટ બનાવવા માટે નીચેનો આદેશ ચલાવો Nuxt.js:
vue init nuxt-community/starter-template my-nuxt-project
પ્રોજેક્ટ રૂપરેખાંકન
તમારા પ્રોજેક્ટને ગોઠવવા માટેના સંકેતોને અનુસરો Terminal. તમે તમારા પ્રોજેક્ટ માટે વિવિધ વિકલ્પો પસંદ કરી શકો છો, જેમ કે ESLint નો ઉપયોગ કરવો, ઇન્સ્ટોલ કરવું Axios વગેરે.
પ્રથમ પૃષ્ઠ બનાવવું અને મૂળભૂત સામગ્રી પ્રદર્શિત કરવી:
પ્રોજેક્ટ ડિરેક્ટરી ખોલો
તમારું ખોલો Terminal અને આદેશ cd my-nuxt-project(અથવા તમે પસંદ કરેલ ફોલ્ડર નામ) નો ઉપયોગ કરીને પ્રોજેક્ટ ડિરેક્ટરીમાં નેવિગેટ કરો.
નવું પૃષ્ઠ બનાવો
નીચેના આદેશ સાથે નવું પૃષ્ઠ બનાવવા માટે Vue CLI નો ઉપયોગ કરો:
npx vue-cli-service generate page mypage
નવું પૃષ્ઠ સંપાદિત કરો
mypage.vue ડિરેક્ટરીમાં ફાઇલ ખોલો pages અને પૃષ્ઠની સામગ્રીને સંપાદિત કરો. તમે HTML, Vue ઘટકો અને ડેટા ઉમેરી શકો છો.
પૃષ્ઠ દર્શાવો
ફાઇલમાં layouts/default.vue, તમે <nuxt/> પૃષ્ઠની સામગ્રી પ્રદર્શિત કરવા માટે ટેગનો ઉપયોગ કરી શકો છો.
પ્રોજેક્ટ ચલાવો
માં Terminal, પ્રોજેક્ટ શરૂ કરવા માટે નીચેનો આદેશ ચલાવો અને બ્રાઉઝરમાં તમારું પૃષ્ઠ જુઓ:
npm run dev
હવે તમારી પાસે પ્રોજેક્ટમાં તમારું પ્રથમ પૃષ્ઠ છે Nuxt.js અને તમે ઇચ્છિત સામગ્રીને કસ્ટમાઇઝ કરી શકો છો.