Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fzhange/nx-vue-spark
A vue3 template repo. Assist you to start a vue3 project wtih nx quickly.
https://github.com/fzhange/nx-vue-spark
i18n library nx nxcloud themes typescript vue3-typescript vueuse
Last synced: 5 days ago
JSON representation
A vue3 template repo. Assist you to start a vue3 project wtih nx quickly.
- Host: GitHub
- URL: https://github.com/fzhange/nx-vue-spark
- Owner: fzhange
- Created: 2024-03-12T09:57:02.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-17T06:36:55.000Z (10 months ago)
- Last Synced: 2024-11-15T09:07:59.818Z (2 months ago)
- Topics: i18n, library, nx, nxcloud, themes, typescript, vue3-typescript, vueuse
- Language: Vue
- Homepage: https://fzhange.github.io/pack-stack/
- Size: 7.51 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NxVueSpark
![portal-logo](https://s1.imagehub.cc/images/2024/03/13/9a73d8333d97ee2a760e2680dce92c0d.png)
Hello, fellows. Welcome to the NxVueSpark.
The NxVueSpark is a vue3 project with nx as a build tool. It can assist you in starting a vue3 project swiftly.
## other templates
If you want to build a vue or react or whatever application. Some other templates can help you.
- [nx-vue-spark](https://github.com/fzhange/nx-vue-spark) (a vue3 standalone application based on nx)
- [nx-vue-cosmopolis](https://github.com/fzhange/nx-vue-cosmopolis)(a vue3 mono repo based on nx)## đ Features
- đĒ the nx support
- đĒ Out of the box
- đĒ Cache the tasks you run
- đĒ multiple theme support
- đĒ i18n support
- đĒ a Cypress based set of e2e tests (e2e/)
- đĒ Ts Prettier ESLint Vitest preconfigured## đĻ Usage
1. clone repo first.
```bash
git clone [email protected]:fzhange/NxVueSpark.git
npm install
npm start
```2. Visit in your local browser
## â serve script
start, build and test your application.
```json
{
"start": "nx serve", // start dev server
"build": "nx build", // build application
"test": "nx test", // runs tests using Jest
"lint": "nx lint", // runs linting with ESLint
"e2e": "nx e2e" // runs e2e tests with Cypress
}
```More conveniently, we can also run them in parallel using the following syntax:
```bash
npx nx run-many -t test lint e2e
```Also, I wanted to mention that Nx offers a command-line interface that can assist you in creating components efficiently.
```bash
npx nx g @nx/vue:component index --directory=src/components/hello-world
```## đ˛ project structure
```ts
.
âââ README.md
âââ README_CN.md
âââ dist
â  âââ nx-vue-spark
âââ docs
â  âââ en
â  âââ zh
âââ e2e
â  âââ cypress.config.ts
â  âââ project.json
â  âââ src
â  âââ tsconfig.json
âââ index.html
âââ nx.json
âââ package-lock.json
âââ package.json
âââ project.json
âââ scripts
â  âââ create-component.ts
âââ src
â  âââ app // your business logic
â  âââ components // components logic
â  âââ composables // your common composables api
â  âââ const // constant
â  âââ main.ts // project entry
â  âââ routes // routes directory
â  âââ styles
â  âââ styles.less
â  âââ tools // tools directory
âââ tsconfig.app.json
âââ tsconfig.json
âââ tsconfig.spec.json
âââ vite.config.ts
```Let me explain a couple of things that might be new to you.
| **File** | **Description** |
| --- | --- |
| **nx.json** | This is where we fine-tune how Nx works. We define what cacheable operations there are, and configure our task pipeline. |
| **project.json** | This file is where you can modify the inferred tasks for the NxVueSpark project. |
| **vite.config.ts** | This file is where you can modify vite for the NxVueSpark project. |> [!TIP]
> The concept of nx.json and project.json comes from nx team. If you want to know more about how to configure it? You can visit the official doc.## đ¸ Thanks
Hope this repository can help you guys.
If you like it. Please give me a star, thanks. âī¸