YouTip

In the previous chapter (#), we used the npm init command to create a project. In this chapter, we'll mainly introduce how to create a project using the npm create command and how to open the graphical installation interface with the vue ui command. The recommended IDE configuration for Vue development is [Visual Studio Code + Vue - Official Extension](#): !(#) Other IDE support includes: * Sublime Text supports it via (https://github.com/sublimelsp/LSP-volar). * vim / Neovim supports it via (https://github.com/yaegassy/coc-volar). * emacs supports it via (https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/). * * * ## The npm create Command To create a Vue project, you typically use the npm create command, which leverages Vite—the build tool officially recommended by Vue—to create a Vue application. In Vite, npm create is used to execute scaffolding tools (such as vite@latest) to quickly generate a new project template. For detailed information about Vite, refer to: (#). The syntax for creating a project with the npm create command is as follows: npm create vite@latest --template vue **Explanation:** * `npm create`: This command is used to execute a project template. It creates a new project and initializes it from the given template. * `vite@latest`: Vite is the tool used to create Vue 3 projects. `@latest` specifies that the latest version of Vite should be used, ensuring your project is based on the newest version of Vite. Without `@latest`, npm will attempt to use the currently installed version. * ``: The name of the folder for the newly created project. The command will create a folder and place the template code inside it. For example, running `npm create vite@latest my-vue-app --template vue` will create a folder named `my-vue-app` in the current directory and place the Vue project's template files inside it. * `--template vue`: `--template vue` specifies the type of template to use. Vite supports multiple templates; `vue` is the template specifically designed for Vue 3. Other templates include `vanilla`, `react`, `svelte`, etc. Next, let's create the -vue3-app project: npm create vite@latest Executing the above command will prompt you to enter the project name and select a framework: > Project name: … -vue3-app ? Select a framework: › - Use arrow-keys. Return to submit.❯ Vanilla Vue React Preact Lit Svelte Solid Qwik Angular Others Vite supports several templates, including: * `vue`: Vue 3 project (default uses Vue 3) * `vanilla`: Basic template without any framework * `react`: React project * `svelte`: Svelte project * `preact`: Preact project * You can also choose other templates based on specific needs. You can use the arrow keys to make your selection. Let's choose Vue, and then the variant options screen appears. We can quickly start with JavaScript: > Project name: … -vue3-app > Select a framework: › Vue> Select a variant: › JavaScriptScaffolding project in /Users//-test/-vue3-app...Done. Now run: cd -vue3-app npm install npm run dev After installation, we enter the project directory: cd -vue3-app The entire directory structure is shown below: !(#) Install dependencies and start the application: npm install npm run dev Then open **http://localhost:5173/**, and you'll see the application interface: !(#) Additionally, you can set your own port in the vite.config.js file—for example, setting the port to 3000: ## Example import{ defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vite.dev/config/ export default defineConfig({ plugins:[vue()], server:{ port:3000,// Your specified port number }, }) * * * ## The vue ui Command Besides using the vue create command to create a project, you can also use the visual creation tool to create a project. Run the command: $ vue ui -> Starting GUI...-> Ready on http://localhost:8000... Executing the above command will pop up a project management interface in your browser: !(#) We can click the **"Create"** option to create a project. Select "Create project here" at the bottom, and you can also choose the path at the top of the page: !(#) Then enter your project name, select npm as the package manager, and click Next: !(#) Just leave the configuration as default: !(#) Now just wait for the installation to complete. Once the installation is finished, the management interface looks like this: !(#)