Vue – cli scaffold

Cli.vuejs.org/zh/guide/in…

1. Introduction

Vue-cli is a vue scaffolding that allows you to quickly construct project structures vue-CLI itself integrates a variety of project templates: Simple very few simple Webpacks include ESLint code specification checking and unit unit testing. Webpack-simple does not include ESLint code specification checking and unit testing. Browserify uses Browserify-Simple a lotCopy the code

2. Examples, steps:

2.1 Installing @vue/ CLI (VUe-CLI) to configure the VUE command environment

Version ---- 2.9.6 version NPM install vue-cli -g or YARN Global add vue-cli vue --version vue list version ---- @vue/ CLI 4.1.2 NPM install -g@vue /cli # OR YARN Global add @vue/cli, OR install yarn Global add @vue/cli@3 You can install a bridge tool to pull the 2.x template NPM install -g@vue /cli-init 'vue init' will run the same as' [email protected] 'vue init webpack-simple webpack-simple-web vue init webpack vue-cli2-demoCopy the code

Global uninstallation: yarn Global remove@vue/CLI

2.2 Initializing a Project and generating a project template

Vue-cli VUe-cli 2 Syntax: vue init Template name Project name@vue/CLI 3-4 Syntax: vue create Project nameCopy the code

2.3 Go to the generated project directory and install the module package

cd vue-cli2-demo
npm install
Copy the code

2.4 run

Vue-cli version created projects: NPM run dev // start test service NPM run build // NPM run serve // Start the development service NPM run build // package the project and output the dist directory. ESLint is a tool used to unify code specifications and styles, such as indentation, Spaces, symbols, etc., with strict requirementsCopy the code

website

2.5 Using the GUI

You can also create and manage projects with a graphical interface using vue UI commands:

vue ui

Third, modular development

2. Axios modularity

npm install axios -S
Copy the code

There are two ways to use AXIos in vue-Cli3-Demo: Method 1: Introduce AXIos in each component,

import axios from 'axios'; getInfo(){ axios.get('https://api.github.com/users/fly39244080').then((res)=>{ console.log(res); })}Copy the code

Option 2: Introduce axios globally in main.js and add it to the Vue prototype

import axios from 'axios'; Vue.prototype.$axios = axios; getInfo(){ this.$axios.get('https://api.github.com/users/fly39244080').then((res)=>{ console.log(res); })}Copy the code

3. Add events for custom components

Second, the Element the UI

1. Introduction

ElementUI is a vue 2.0-based component library provided by the Ele. me team, which can quickly build websites and improve development efficiencyCopy the code

website

2. Get started

2.1 Installing the Elment UI

cnpm install element-ui -S
Copy the code

2.2 Introduce and use components in main.js

Import ElementUI from 'element-ui' import 'ElementUI /lib/theme-default/index.css' This approach brings in all the components in ElementUICopy the code

2.3 Adding a Loader in webpack.config.js

CSS styles and font ICONS need to be loaded by the corresponding loader, so style-loader is required. CSS -loader does not have the style-loader module by default, so CNPM install style-loader --save-devCopy the code

2.4 Using Components

2.5 use less

Two loaders need to be installed: less and less-loader CNPM install less less-loader -d Add the loader in webpack.config.jsCopy the code

3. Import groups as required

3.1 installation Babel – plugin – component

cnpm install babel-plugin-component -D  
Copy the code

3.2 Configuring the. Babelrc file

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]
Copy the code

3.3 Introduce only required plug-ins