Create Nuxt Project with Vue CLI

Install Vue CLI

Vue CLI is the core tool for building Vue projects and must be installed globally first: 

npm install -g @vue/cli

After installation, you can verify the installation status via the command line: 

vue --version

Create Nuxt Project

When creating a Nuxt project using Vue CLI, you need to specify the framework type: 

vue create my-nuxt-project

Upon running the command, the system will prompt you to select a framework type (such as Vue 3 or Vue 2); please confirm your selection based on your requirements.

Configure Nuxt

After the project is created, enter the project directory and configure Nuxt: 

cd my-nuxt-project

In the vue.config.js file, you can customize project configurations, such as setting the port or adding plugins.

Install Dependencies

Nuxt projects depend on libraries like Vue Router and Vuex; these must be installed via npm: 

npm install vue-router vuex @vue/compiler-express

Once installation is complete, the project will automatically import the relevant modules without requiring additional configuration.

Start Project

Finally, start the development server using the following command: 

npm run serve

Access http://localhost:3000 in your browser to view the project interface.

Notes

  • Configuration File Modifications: If you need to adjust project behavior, modify configuration items in nuxt.config.js, such as route settings or theme customization.
  • Dependency Management: When installing dependencies using npm install, it is recommended to use npm ci to ensure consistent dependency versions.
  • Environment Variables: Environment variables can be accessed via process.env within the project, such as using process.env.NODE_ENV to determine whether you are in development or production mode.

Example

Below is the complete command flow for creating a Nuxt project:

  1. Install Vue CLI
  2. Create the project
  3. Enter the project directory
  4. Configure Nuxt
  5. Install dependencies
  6. Start the development server

The core goal of project initialization is to rapidly build an extensible Vue framework. Through Vue CLI's standardized process, developers can efficiently complete the entire workflow from code creation to feature deployment.