快速搭建vue2前端项目

一.创建前置条件

1. 安装并配置了node.js
2. 安装并配置了npm包管理器
3. 安装了Vue CLI

 二.创建步骤

        1.在要创建的路径下的地址栏输入"cmd"

        2.输入"vue create 文件名"

        3.运行vue项目：

cd 项目名

npm run serve

        4.引入antDesign

        如果不需要前端框架，可以不执行这段，如果需要使用antDesign，而且是vue2的项目，需要指定组件版本，antDesign只有1.x版本支持vue2。antDesign官网。

npm install ant-design-vue@1.7.8 -S

        5.引入scss

        scss是一种CSS预处理器。

npm install -g sass

        6.引入vuex和vuerouter

npm install vue-router@3.2.0

npm install vuex@3.6.2

        7.定义router下的indext.js

        创建router文件夹，创建indext.js

// router文件夹下的indext.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import Manage from '@/views/Manage'

import About from '@/views/About'



Vue.use(VueRouter)



const routes = [

  {

    path: '/',

    name: 'Manage',

    component: Manage

  },

  {

    path: '/about',

    name: 'About',

    component: About

  }

]



const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})



export default router

        8.定义store下的indext.js

        创建store文件夹，创建indext.js

// store文件夹下的indext.js

import Vue from 'vue'

import Vuex from 'vuex'



Vue.use(Vuex)



export default new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    }

  },

  actions: {

    incrementAsync ({ commit }) {

      setTimeout(() => {

        commit('increment')

      }, 1000)

    }

  },

  getters: {

    getCount: state => state.count

  }

})

        9.定义main.js

import Vue from 'vue'

import Manage from '@/views/Manage'

import router from './router'

import store from './store'

import Antd from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css';



Vue.use(Antd);



Vue.config.productionTip = false



new Vue({

  router,

  store,

  render: h => h(Manage)

}).$mount('#app')

        10.创建Manage.vue和About.vue

        在src文件夹下创建views文件夹，并在views文件夹下创建Manage.vue和About.vue页面，以防止运行时，路由找不到这两个页面。