Front-end project imports vue and element

1. Install nodejs

Download linkhttps://cdn.npmmirror.com/binaries/node/v18.18.0/node-v18.18.0-x64. msi

Enter cmd command line mode and run as administrator

Enter (node -v) to see the version number

npm config set prefix “C:\Program Files\\
odejs” default path

npm config set prefix ” Write the path to your installation “

Switch npm’s Taobao mirror (npm config set registry https://registry.npm.taobao.org)

2. Install vue/cli

Enter ( npm install -g @vue/cli )

An error occurred Search by error

Installed input (nue ui)

The browser automatically opens (http://localhost:8000) this web page. We create the project here.

Create a folder on the desktop and copy the path get off

The path has been changed. Enter the project name and click Create

Just click Create

Then just start the cmd window of vue and you can see the create project

Wait a few minutes to complete

Start project

Import vscode and enter npm in the search box

Select the first one and start it

See this has been started

Open the browser and enter http://localhost:8080/ and then see the vue meeting

Stop the project first

Enter the vscode terminal and press ctrl + c

Install element

Click on the project folder in vscode (right-click) (open in the integrated terminal)

Enter npm install [email protected]

An error occurred Search by error

In the project file, you can see that this file “node_modules\element-ui” has been installed

Introduce elemnt

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
   devServer:{
  port:7000
   }
})

main.js file

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//Introduced by eliment
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
//Introduced by eliment
Vue.use(ElementUI);

newVue({
  router,
  render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <div>
    <!-- <h1>{<!-- -->{ message }}</h1> -->

    <!-- <emp-view></emp-view> -->
    <element-view></element-view>

  </div>
</template>


<script>
import ElementView from './views\element\ElementView.vue'


export default {

  components: {ElementView},
  data() {
    return {
      message: "hello vue111",
    }
  },
  methods: {

  }
}
</script>
<style></style>

ElementView.vue

<template>
  <div>
    <el-row>
      <el-button round>Rounded Button</el-button>
      <el-button type="primary" round>Primary button</el-button>
      <el-button type="success" round>Success button</el-button>
      <el-button type="info" round>Information button</el-button>
      <el-button type="warning" round>Warning button</el-button>
      <el-button type="danger" round>Danger button</el-button>
    </el-row>

    <!-- <el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row> -->

    <!-- Table -->
    <br>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="date" width="180">
      </el-table-column>
      <el-table-column prop="name" label="name" width="180">
      </el-table-column>
      <el-table-column prop="address" label="address">
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
    <el-pagination background layout="total,sizes, prev, pager, next, jumper, ->, slot" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :total="1000"></el-pagination>
    <div>
      <el-button type="text" @click="dialogTableVisible = true">Open the Dialog of the nested table</el-button>
      <br>
      <!-- Dialog box -->
      <el-dialog title="Shipping Address" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" label="date" width="150"></el-table-column>
          <el-table-column property="name" label="name" width="200"></el-table-column>
          <el-table-column property="address" label="address"></el-table-column>
        </el-table>
      </el-dialog>


      <!-- Dialog box for -->
      <el-button type="text" @click="dialogFormeVisible = true">Open Dialog with embedded form</el-button>
      <!-- <el-table title="form form" :visible.sync="dialogFormeVisible"></el-table> -->
      <el-dialog title="Shipping Address" :visible.sync="dialogFormeVisible">
        <el-input v-model="input" placeholder="Please enter the content"></el-input>

      </el-dialog>


      <br>

      <!-- Dialog box for -->
      <el-button type="text" @click="Visible = true">Open the Dialog of the nested table</el-button>
      <el-dialog title="Shipping address" :visible.sync="Visible">
        <el-input v-model="input" placeholder="Please enter the content"></el-input>
        <el-table :data="gridData">
          <el-table-column property="date" label="date" width="150"></el-table-column>
          <el-table-column property="name" label="name" width="200"></el-table-column>
          <el-table-column property="address" label="address"></el-table-column>
        </el-table>

      </el-dialog>


    </div>
    <el-button type="text" @click="Visibleed = true">Open the Dialog of the nested table</el-button>
    <el-dialog title="Shipping Address" :visible.sync="Visibleed">
      
      <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="Activity Name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="Activity area">
    <el-select v-model="form.region" placeholder="Please select the activity region">
      <el-option label="Region 1" value="shanghai"></el-option>
      <el-option label="Region 2" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="Activity Time">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="Select date" v-model="form.date1" style="width: 100%;"></el-date- picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="Select time" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Create now</el-button>
    <el-button>Cancel</el-button>
  </el-form-item>
</el-form>

    </el-dialog>

  </div>
</template>

<script>

export default {
  data() {
    return {
      form:{
        name: '',
          region: '',
          date1: '',
          date2: '',
      },
      gridData: [{
        date: '2016-05-02',
        name: 'Wang Xiaohu',
        address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-04',
        name: 'Wang Xiaohu',
        address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-03',
        name: 'Wang Xiaohu',
        address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
      }],
      dialogTableVisible: false,
      dialogFormeVisible: false,
      Visible: false,
      Visible: false,



      tableData: [
        {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Alley 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Alley 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Alley 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Alley 1516, Jinshajiang Road, Putuo District, Shanghai'
        },
      ],
    };

  },
  methods: {
    handleSizeChange: function (val) {
      alert("Record changes on each page" + val)

    },
    handleCurrentChange: function (val) {
      alert("Changes in the number of records per page" + val)

    },
    onSubmit:function(){
        alert(JSON.stringify(this.form));
    }
  }
};









</script>

<style ></style>

Create a file yourself in the src\views\\
ame folder\ElementView.vue. Pay attention to the size

app.file

Error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"3.0.2" from @vue/[email protected]
npm ERR! node_modules/@vue/compiler-sfc
npm ERR! peer @vue/compiler-sfc@"*" from [email protected]
npm ERR! node_modules/rollup-plugin-vue
npm ERR! rollup-plugin-vue@"^6.0.0-beta.10" from [email protected]
npm ERR! node_modules/vite
npm ERR! dev vite@"^1.0.0-rc.1" from the root project
npm ERR! @vue/compiler-sfc@"^3.0.0-rc.10" from [email protected]
npm ERR! node_modules/vite
npm ERR! dev vite@"^1.0.0-rc.1" from the root project
npm ERR! 1 more (the root project)
npm ERR! vue@"^3.0.0-rc.10" from [email protected]
npm ERR! node_modules/vite
npm ERR! dev vite@"^1.0.0-rc.1" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-router@"4.0.13" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! peer vue@"^3.2.0" from [email protected]
npm ERR! node_modules/vue-router
npm ERR! vue-router@"4.0.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\zeyi\AppData\Local\\
pm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

According to the error message, add –legacy-peer-deps to the command line. Due to the compatibility issue between vue and vue-router versions, you need to add the need to download the vue-router version after the installation statement, otherwise the latest vue-router version will be downloaded.

npm install --legacy-peer-deps [email protected]

It may also be because the router version you want to download is too high. If the downloaded version is too high, an error will be reported when starting the project. You can download a lower version of vue-router.

npm install [email protected] --save-dev

Finally, check whether the download is successful in the package.json file

npm install [email protected]

Error

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Local\\
pm-cache\_logs\2022-06-14T08_44_12_502Z-debug-0.log

Delete node_modules and package-lock.json, then run
```
npm install
```
Or try clearing NPM cache
```
npm cache clean --force
```
Or run the command with the –legacy-peer-deps option
```
npm install --legacy-peer-deps
```
Or run the command with the –force option
```
npm install --force
```
npm install [email protected]

Error

npm install --legacy-peer-deps

A complete log of this run can be found in: C:\Users\Mamkap\AppData\Local\\
pm-cache\_logs\2023-11-08T03_49_10_551Z-debug-0.log
Waiting for the debugger to disconnect…

Execute npm install npm@latest -g to upgrade to the latest version (if you still get an error after upgrading to the latest version, you need to update npm globally. After the update, check that the npm version number has not changed, and there should be an update internally);
.Delete local node_modules dependency package;
Execute npm cache clean –force to clean the cache;
npm i install dependencies;
If the above process doesn’t work once you try it, you can try it a few more times and it will be OK.

Error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from [email protected]
npm ERR! node_modules/element-ui
npm ERR! element-ui@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\\
pm-cache\eresolve-report.txt for a full report.
 
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Local\\
pm-cache\_logs\2021-10-11T06_27_44_908Z-debug.log

npm i element-ui @xdh/my –legacy-peer-deps

`npm install npm -g` Update it

I solved it here by clearing npm’s cache (npm cache clean –force)

Error

Solution:

Downgrade npm to version 6 and run the following command in the terminal

npm install –legacy-peer-deps

npm install [email protected] –save

npx -p npm@6 npm i --legacy-peer-deps

This error is usually caused by npm’s inability to resolve dependencies. You can try the following steps
1. Clear npm cache: npm cache clean –force
2. Update npm: npm install -g npm@latest
3. Delete the node modules folder: rm -rf node modules
4. Delete the package-lock.json file: rm -rf package-lock.json
5. Reinstall dependencies: npm install

1. Install nodejs

Enter cmd command line mode and run as administrator

Enter (node -v) to see the version number

2. Install vue/cli

Create a folder on the desktop and copy the path get off

The path has been changed. Enter the project name and click Create

Just click Create

Start project

Import vscode and enter npm in the search box

Select the first one and start it

Stop the project first

Install element

Click on the project folder in vscode (right-click) (open in the integrated terminal)

Enter npm install [email protected]

In the project file, you can see that this file “node_modules\element-ui” has been installed

Introduce elemnt

vue.config.js

main.js file

app.vue

ElementView.vue

Create a file yourself in the src\views\\ ame folder\ElementView.vue. Pay attention to the size

Error

Error

Error

Error

npm install npm -g Update it

Error

Solution:

Create a file yourself in the src\views\\
ame folder\ElementView.vue. Pay attention to the size

`npm install npm -g` Update it