vue2开发前的准备和注意事项

目录

注意事项

1、创建vue脚手架

2、项目启动

3、安装路由VueRouter

4、安装axios【需要自行安装】

5、安装vuex

6、安装ElementUI【自行安装】

7、打包【提交项目】

---

注意事项

components文件夹：主要写会重复用到的模块
views：写页面
文件命名格式：以大写开头，且至少两个单词，eg：ClassPage.vue
安装配置时：要先进入到正确的项目文件夹下

---

1、创建vue脚手架

不要出现中文名

vue create lean-router

2、项目启动

不一定是如下，具体项目配置有具体启动命令

cd lean-router
npm run serve

3、安装路由VueRouter

（1）可以在构建VueCLI脚手架时自动安装配置

（2）也可自行安装，命令如下

npm install vue-router@3
npm run serve

4、安装axios【需要自行安装】

（1）安装

npm install axios

（2）封装 

①src文件夹下新建=》request文件夹=》request.js

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

export default instance

②src文件夹=》新建api文件夹=》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、安装vuex

（1）安装

npm install vuex@3

（2）配置

进入main.js文件，进行vuex的引入和使用配置

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

6、安装ElementUI【自行安装】

（1）安装

npm i element-ui -S

（2）配置

进入main.js文件，进行ElementUI组件库的引入

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

Vue.use(ElementUI);    //使用

7、打包【提交项目】

npm run build