A simple tutorial on creating a VUE project

Steps to create a Vue.js project: Installation prerequisites: Node.js (v16.x), Vue CLI (global installation). Create a project: Use the vue create command to navigate to the target directory. Installation Dependencies: Vue CLI automatically installs dependencies. Run the project: In the project directory, use the npm run serve command.

Teach you step by step to create a Vue.js project

Preparation:

• Install Node.js (v16.x or later)
• Install Vue CLI (global installation)

 <code>npm install -g @vue/cli</code>

Create a project:

1. Open a terminal or command prompt and navigate to the location where you want to create the project.
2. Run the following command:

 <code>vue create </code>

Installation dependencies:

• The Vue CLI creates the project and automatically installs dependencies.

Run the project:

• In the project directory, run the following command:

 <code>npm run serve</code>

• This will start the development server at http://localhost:8080 .

Project structure:

• src/main.js: Project entry point, create and mount Vue instances.
• src/App.vue: Root Vue component, defining the layout and content of the application.
• src/components: The directory containing reusable Vue components.
• public: A directory containing static files and favicon.
• node_modules: The directory of the dependencies installed by NPM.
• package.json: A JSON file containing project settings, dependencies, and scripts.

Code example:

• src/main.js:

 <code class="js">import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')</code>

• src/App.vue:

 <code class="html"><template> <div> <h1 id="message">{{ message }}</h1> <button>Say Hello</button> </div> </template> <script> export default { data() { return { message: &#39;Hello Vue!&#39; } }, methods: { sayHello() { this.message = &#39;Hello, I am Vue!&#39; } } } </script></code>

Notice:

• The Vue CLI automatically configures other files based on the presets and options you choose, such as .env and vue.config.js .
• You can view available presets and options by running the vue create --help command.

The above is the detailed content of A simple tutorial on creating a VUE project. For more information, please follow other related articles on the PHP Chinese website!