Preparações e precauções antes do desenvolvimento vue2

Índice

Precauções

1. Crie andaimes vue

2. Início do projeto

3. Instale o roteamento VueRouter

4. Instale o axios [você precisa instalar você mesmo]

5. Instale o vuex

6. Instale o ElementUI [auto-instalação]

7. Pacote【Enviar projeto】

---

Precauções

pasta de componentes: escrever principalmente módulos que serão usados ​​repetidamente
views: escrever páginas
Formato de nomenclatura de arquivo: comece com letras maiúsculas e pelo menos duas palavras, por exemplo: ClassPage.vue
Ao instalar e configurar: primeiro insira a pasta correta do projeto

---

1. Crie andaimes vue

Não aparece nome chinês

vue create lean-router

2. Início do projeto

Não necessariamente da seguinte forma, a configuração específica do projeto possui um comando de inicialização específico

cd lean-router
npm run serve

3. Instale o roteamento VueRouter

(1) A configuração pode ser instalada automaticamente ao construir o andaime VueCLI

(2) Você também pode instalar você mesmo, o comando é o seguinte

npm install vue-router@3
npm run serve

4. Instale o axios [você precisa instalar você mesmo]

(1) instalação

npm install axios

(2) Encapsulamento 

① Crie uma nova pasta na pasta src = "request folder = "request.js

import axios from 'axios';
创建实例
const instance = axios.create({
    baseURL:"",
    timeout:1000,//超时则中断请求
})

export default instance

②src folder = "new api folder = "about.js, home.js, index.js

import instance from "@/request/request.js"

export function Rainbow(params){
    return instance({
        url:'/caihongpi/index',
        method:"GET",
        params:params,//params
    })
}

export function Flatterer(data){
    return instance({
        url:'/tiangou/index',
        method:"POST",
        data,
        headers:{
            'content-type':'application/x-www-form-urlencoded'
        }
    })
}

5. Instale o vuex

(1) instalação

npm install vuex@3

(2) Configuração

Digite o arquivo main.js para introduzir e configurar o vuex

import vuex from "vuex";
Vue.use(Vuex);

6. Instale o ElementUI [auto-instalação]

(1) instalação

npm i element-ui -S

(2) Configuração

Insira o arquivo main.js para importar a biblioteca de componentes ElementUI

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

Vue.use(ElementUI);    //使用

7. Pacote【Enviar projeto】

npm run build