Boilerplate code to quickly start a front-end web project using Vite & Vue 3.
- Includes Vue Router for multiple pages and URL routing
- Includes ESLint linting configuration for code consistency
- Includes SASS as CSS pre-processor
- Node 18+
No installation steps, quick configuration route using generate-front-end
:
npx generate-front-end
Or run the steps manually:
- Clone:
git clone https://github.com/foxxyz/front-end-starter.git
- Install dependencies:
npm install
- Test it works:
npm run dev
Once you're up and running, make sure to update the following items:
Note: below steps performed automatically if installed using generate-front-end
- Update package name and description in
package.json
- Update author and repository info in
package.json
- Update project title in
index.html
- Change favicons (
public/favicon.ico
,public/favicon-32x32.png
andpublic/favicon-16x16.png
) - Update git remote using
git remote set-url origin <git-repo-url>
- Remove ci directory
rm -rf .github
- Run
npm install
again to updatepackage-lock.json
- Update or remove
LICENSE
file - Start building your main page in
src/pages/home.vue
src/components
: Sub-page and smaller level componentssrc/fonts
: Font assetssrc/images
: Image assetssrc/pages
: Components for each main pagesrc/services
: Reusable services, such as API or data management modules
- Lint your project:
npm run lint
- Compile:
npm run build
- Upload contents of
dist
to a directory accessible by your web server.
MIT