Project initialization

1. Project initialization

Vue create my_mm // Vue create project nameCopy the code

2. Select related options

3. Select a version number

4. Select a routing mode

-y indicates that the history mode is adopted. -n indicates that the hash mode is adoptedCopy the code

5. Select the CSS preprocessing

6. Select a code verification specification

7. Select the code triggering condition

It is recommended to choose both, more rigorous.

  • Lint on Save: Checks for ESLint errors when saving a file.
  • Lint and fix on commit: whenever executedgit commitWhen you submit it, yesAutomatic correctionEslint errors.

8. Select a code verification configuration file

Babel, ESLint, and other tools have additional configuration files. This means asking you where to write the configuration files related to these tools:

  • In Dedicated Config Files: Save the files to a separate configuration file
  • In package.json: Save to a package.json file

9. Determine whether to save the default Settings

It asks you if you want to save the list of configurations you just selected, and then it can help you remember the list of choices for direct reuse next time.

10. Press Enter to start the dependency package installation process

The wizard configuration is complete and the package installation starts. The installation may take a long time. Please wait for……

11. After the installation is complete, the following effect is displayed

12. Run the project

Enter your project directory
cd mytest

Start the development service
npm run serve
Copy the code

The configuration in VUE uses the Element-UI component library

1. Run the following command to install component library dependencies

npm install element-ui --save
Copy the code

2. Configure the following code in the main.js file


import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.config.productionTip = false
Vue.use(ElementUI);
 
new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

3. Use the component library and use the button component in the component in app.js

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <el-row>
      <el-button>The default button</el-button>
      <el-button type="primary">The main button</el-button>
      <el-button type="success">Successful button</el-button>
      <el-button type="info">Information button</el-button>
      <el-button type="warning">The warning button</el-button>
      <el-button type="danger">Dangerous button</el-button>
    </el-row>
  </div>
</template>
Copy the code

Configuration axios

  • Install axios package
/ / NPM installation
npm install axios
Copy the code
  • Import main.js after the installation
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router,
  store,
  axios,
  render: h= > h(App)
}).$mount('#app')
Copy the code