美文网首页前端
Vue 全家桶搭建后台管理系统(一、搭建项目)

Vue 全家桶搭建后台管理系统(一、搭建项目)

作者: ShenglongWang | 来源:发表于2018-08-08 17:09 被阅读2557次

    准备工作

    该项目是使用 Vue 官方提供的 vue-cli 这个构建工具,大大降低了我们使用webpack来配置项目的难度。
    1、该项目要基于node环境,所以我们要去官网下载安装(具体不再赘述);
    2、安装npm,一般安装最新版node的时候就会安装好npm。

    开始搭建

    一、全局安装 vue-cli,输入下面的命令:npm install -g vue-cli
    二、创建一个基于 webpack 模板的新项目 myProject(项目名可自己定义),输入命令:vue init webpack myProject

    接下来一般都按 enter 键即可,但要注意以下两点:
    1、项目名称:项目名不能包含大写字母,myProject中包含大写字母,所以需要修改。

    Project name
    2、ESLint 即代码规范,这个直接选 Y 的话,代码写得不规范会报错,新手很蛋疼,所以可以选 n ESLint
    3、项目创建成功
    三、进入创建的项目文件夹:cd myProject
    四、启动本地服务器:npm run dev
    1、在浏览器中打开图中地址:
    2、可以看到项目搭建成功!
    五、接下来安装我们需要的插件依赖包

    1、安装 element-ui(基于vue的UI框架): npm i element-ui -S
    然后在 main.js 中写入黑体部分,修改为以下内容:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    Vue.config.productionTip = false
    new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
    })

    2、安装 axios (AJAX与后台交互数据)
    npm install axios -s
    3、安装 vuex(基于vue的状态管理模式)
    npm install vuex -S
    4、安装 echarts(图表显示)
    npm install echarts --save

    六、偷懒借菜鸟教程的说明,注释下我们的项目目录
    myProject
    七、未完待续......

    相关文章

      网友评论

      本文标题:Vue 全家桶搭建后台管理系统(一、搭建项目)

      本文链接:https://www.haomeiwen.com/subject/nnkxbftx.html