Creating a Vue Project with Vue CLI

1. Prerequisites

Node.js version requirement: Vue CLI needs Node.js 8.9 or higher.

node -v

Install Vue CLI globally:

npm install -g @vue/cli

Verify the installation:

vue -V

2. Creating a New Project

1. Run the following command in your terminal (replace test with your project name):

vue create test

2. Choose configuration method: Select Manually select features.

3. Choose the features for your project:

Explanation of each option:

• Babel: Compiles ES6+ code to a version compatible with older browsers. (Highly recommended)
• TypeScript: A superset of JavaScript that adds static typing.
• Progressive Web App (PWA) Support: Makes your web app behave like a native app, especial on mobile.
• Router: Vue Router – essential for single-page applications. (Recommended)
• Vuex: State management for Vue.js.
• CSS Pre-processors: Includes SCSS/Sass, Less, and Stylus. Install based on your preference.
• Linter / Formatter: Code quality tools – not recommended for beginners.
• Unit Testing: For automated unit tests.
• E2E Testing: For end-to-end testing.

Additional notes on CSS pre-processors:

• Less: Simpler, used by Bootstrap.
• Sass: Requires Ruby, more powerful than Less.
• Stylus: Originates from Node.js, does not support native CSS syntax.

Use the arrow keys to navigate, spacebar to select/deselect (selected items are marked with *). Here, we choose Choose Vue version, Babel, Router, and Vuex. Press Enter to proceed.

4. Choose the Vue version: Here we select 2.x.

5. Choose the routing history mode:

• y for history mode: The URL does not contain a #, but requires server-side configuration. May return 404 on refresh if not configured.
• n for hash mode: The URL contains a #, works without server configuration and is supported by older browsers (IE8+).

Comparison table:

In this guide, we select No (hash mode). Press Enter to continue.

6. Choose where to save configuration files:

• In dedicated config files: Babel, PostCSS, ESLint configurations are stored separately.
• In package.json: All configurations are placed in a single package.json file.

Here, select the first option (dedicated files) and press Enter.

7. Save this configuration as a preset for future projects?

• Yes: Saves your choices so you can reuse them later without re-selecting. You will be prompted to name the preset (avoid Chinese characters). A .vuerc file is created in your home directory.
• No: Does not save the preset.

For a one-time project, we choose No. If you choose Yes, you can name the preset for later use.

Demonstration of selecting yes:

Press Enter to begin project creation.

If you choose not to save the preset, just press Enter and wait for the project to be generated.

3. Running the Project

1. Navigate into the project directory and start the development server:

cd test
npm run serve

2. Your Vue project is now ready! Open the URL shown in the terminal (usually http://localhost:8080).

Extra: Adding Elemant UI

To add Element UI to your Vue project, run the following command in the project root:

vue add element

1. Press Enter, then choose Import on demand.

   

2. Select the locale: choose zh-CN (Chinese) or another language.

   

3. Wait for the installation to complete.

   

After installation, you can import and use Element UI components in your Vue project.