vue项目初始配置

先在git上创建仓库

    A、使用git clone + SSH链接 指令将网络上的项目获取到本地

在VS CODE中配置项目

    A、输入vue create . 指令创建项目
    B、输入npm install axios安装axios请求
    C、输入npm install vue-router --save安装路由请求
    D、输入npm install vuex --save安装vuex方法
    E、输入npm install reset-css重置默认样式
    F、输入npm i vant -S安装vant UI 2.0框架 试用移动端开发 3.0版本安装方法看文档
    G、输入npm install less less-loader --save-dev 安装less

配置vue.config.js文件

module.exports = {
  lintOnSave: false, // 关闭eslint 代码规范
  publicPath:process.env.NODE_ENV === 'production'? './':'/' // 设置开发环境下的路径
};

配置jsconfig.json文件

    在当前文件根目录下新建jsconfig.json文件

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}
// 只要是使用'@/'方式去查找路径文件

配置main.js文件 vue2.0

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入vantUI的css样式
import "vant/lib/index.css";
import "@/vantui/index";

// 引入reset-css 自动化清除标签内的 padding和margin边距
import "reset-css";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

配置路由router文件

    A、在当前文件目录下新建index.js文件

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/home",
    name: "Home",
    component: Home,
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

配置store的vuex文件

   A、在当前文件目录下新建index.js文件

import Vue from "vue";
import Vuex from "vuex"; // 引入vuex

Vue.use(Vuex);

// 使用方法
export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

配置vantui文件

    A、在当前文件目录下新建index.js文件

// 专门放引入VantUi的组件
import Vue from "vue";
import {Search} from "vant";

// 引入搜索框
Vue.use(Search);