Vue CLI installation and use element-ui

Vue CLI installation and use element-ui

Tool preparation:

First make sure that the system contains the following environment:

1. Install Node.js and npm

Use the node -v command to check whether the machine is installed. If it is not installed, refer to the node.js installation guide to install it according to the computer system environment. Vue CLI requires Node.js 8.9 or higher (8.11.0+ is recommended).

2. Install Vue CL I

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version//Check if the installation is successful

3. Create a project

You can vue uicreate and manage projects, graphical interface command:

vue ui

After running vue ui, the browser opens a page at http://localhost :8080:

Then click the Create option, create a new project button here

In the next step, enter vue-web in the project folder, and select default items for others

Click Next, in Select a set of presets, select Manual configuration

Continue to click Next, under the function options, select the router, remove the js check

Continue to click Next, and then click the Create Project button, choose to create a project without saving the preset

4. Run the project

After the project is successfully created, select serve under the task option, then click the run button, and finally click to start the app

After running successfully, you will see the following interface

You can also enter the project root directory, view the README.md file, and manage the project through commands

5. Install element-ui

Next we install the element-ui component ( https://element.eleme.cn ), so that we can quickly develop the project

cd vue-web//Enter the project root directory
npm i element-ui -S//install element-ui

6. Complete introduction of element-ui

After the installation is successful, open the vue-web/src/main.js file and add the following content

import ElementUI from'element-ui';
import'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

So that we can use Element official website of the components on the

7. Run the project

yarn install//install dependencies
yarn serve//Run the project

8. Use element's navigation menu

Open the vue-web/src/App.vue file and add the following content

<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex:'/'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

This time to open the following page, it means that have been used successfully Element of

Reference: https://cloud.tencent.com/developer/article/1642328 Vue CLI installation and use element-ui-Cloud + Community-Tencent Cloud