具体可参考vuejs官网

1、全局安装vue-cli：cnpm install -g @vue/cli 如果没有安装淘宝镜像可用npm命令进行下载

2、vue --version 能够查看版本号说明安装成功

3、创建vue项目：可选择文件夹，在文件夹中键入cmd到命令行进行创建，vue create 项目名；项目名通常都是小写

4、选择创建vue项目的版本，上下键可进行切换选择，以及自定义安装

5、创建成功后会有两个命令 （cd 项目名）用于切换目录至项目文件夹内 （npm run serve）用于启动项目，如果有淘宝镜像可以用：cnpm run serve代替（serve可进行修改）

6、启动成功后会有两个查看项目的URL，可用本机ip地址或者localhost进行访问项目

7、在浏览器地址栏键入上一步提供的URL，出现Welcome to Your Vue.js App则说明项目创建成功

8、在编辑器中打开项目，会有众多文件和文件夹

9、其中node_modules里是项目所需要的模块，public中是公共的资源，src是项目的开发目录（写的代码都放在src目录中），在src文件夹中assets是静态资源目录，可存放css、images、js，components是公共的组件（模块），App.vue是根组件，main.js是js文件的总入口，.gitignore是git的配置文件，babel.config.js是编译项目的配置文件，jsconfig.js是js的配置文件，package-lock.json和package.json是包配置文件，README.md是项目说明，vue.config.js是vue项目的配置文件（可在这里配置自动打开浏览器）

10、注意事项：新版本中.vue后缀的文件的命名规则要使用大驼峰命名的方式，即两个单词首字母大写

11、在.vue后缀的文件中<template></template>中必须有一个根标签包裹着其他所有元素

12、在App.vue中对其他创建的.vue文件的使用：.vue文件创建成功后在App.vue文件中使用要先使用import命令进行引入，然后将引入的.vue文件注册为组件（标签），特别注意：引入的.vue文件一定要使用（先注册成为标签，再使用），否则项目会报错，如：

<template>
  <div id="app">
    <HeaderPage></HeaderPage>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <ShengQi></ShengQi>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
// 引入 HeaderPage 文件 （引入的文件必须使用，否则项目就会报错）
import HeaderPage from './components/HeaderPage.vue';
import ShengQi from './components/ShengQi.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    HeaderPage,
    ShengQi,
}
}
</script>

<style>
  /* 在app.js 即这里 定义的样式，其他页面都有效果 */
  @import url("./assets/css/base.css");
</style>

13、在vue.js中默认不支持less文件，想要使用less，需要先下载模块，如果创建的vue项目是vue2.x项目，下载less需要调整版本号：cnpm install less@3 less-loader@5 --save

这个命令是下载了两个模块，并调整了版本号，less模块是为了让vue支持less语法，less-loader这个模块是为了加载less文件，要使用less语法，在下载以上两个模块之后，在页面的style标签后面必须加上lang="less"，之后才能正常使用less语法

配置自启动和代理：在vue.config.js文件中添加

devServer: {
    open: true,          //自启动
    host: "localhost",
    port: 9527,
    proxy: {             //代理
      "/api": {
        target: "https://v4.crmeb.net/api",       //代理的目标
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

配置路由

首先要下载路由模块，注意版本，vue2使用vue-router的3版本

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import HomePage from "@/view/HomePage/HomePage.vue"
import FindPage from "@/view/FindPage/FindPage.vue"
import ClassifyPage from "@/view/ClassifyPage/ClassifyPage.vue"
import CartPage from "@/view/CartPage/CartPage.vue"
import MinePage from "@/view/MinePage/MinePage.vue"

let routes = [
    {
        path:"/",
        redirect:"/home"
    },
    {
        path:"/home",
        component:HomePage,
        meta:{
            showTabBar:true
        }
    },
    {
        path:"/classify",
        component:ClassifyPage,
        meta:{
            showTabBar:true
        }
    },
    {
        path:"/find",
        component:FindPage,
        meta:{
            showTabBar:true
        }
    },
    {
        path:"/cart",
        component:CartPage,
        meta:{
            showTabBar:true
        }
    },
    {
        path:"/mine",
        component:MinePage,
        meta:{
            showTabBar:true
        }
    },
    {
        path:"/login",
        component:() => import("@/view/LoginPage/LoginPage.vue")
    }
]



const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

export default router







import Vue from 'vue'
import App from './App.vue'

import router from "./router/index.js"

Vue.config.productionTip = false

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

新建utils文件夹，并在其中新建request.js文件，在其中键入如下代码：

import axios from "axios"

let service = axios.create({
    baseURL: "/api",    //
    timeout: 10000      //超时
})


export default service

新建api文件夹，新建js文件，暴露接口方法：

import service from "@/utils/request";

export const ShopListApi = (params) => {
    return service({
        url: "/category",
        method: "get",
        params
    })
}

使用vuex进行状态管理，并对完成对数据的请求

import Vue from 'vue'
import Vuex from 'vuex'
import { ShopListApi} from "@/api/shop.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    shopListDatas: []
  },
  getters: {
  },
  mutations: {
    changeshopListDatas(state, data) {
      state.shopListDatas = data
    }
  },
  actions: {
    async actChangeShopListDatas(context, params) {
      let result1 = await ShopListApi(params)    //params= {page:1,size:5}
      // console.log(result1.data.data);
      context.commit("changeshopListDatas", result1.data.data)
    }
  },
  modules: {
  }
})

在vue文件中进行使用：

 computed: {
        shopListDatas() {
            return this.$store.state.shopListDatas
            // console.log(this.$store.state.shopListDatas.data);
        }
    },




mounted() {
        // console.log(this.$store);
        // console.log(this.$store.dispatch);
        this.$store.dispatch("actChangeShopListDatas", {
            // page: this.page,
            // size: this.size
        });

    },

shopListDatas就是请求得到的·数据，在template中可以直接使用，可用v-for遍历等