Vue前后端分离

Vue前后端分离

一、工程创建前期（不用切换目录）
    1、安装淘宝镜像cnpm
        npm install -g cnpm -registry=https://registry.npm.taobao.org
        
        查看是否安装完毕：
            node –v
            npm –v    或   cnpm -v

    2、安装脚手架，用于快速创建工程
        安装 vue-cli （先安装Vue，再安装vue-cli ）
         A、cnpm install -g vue
         B、cnpm install -g vue-cli

    3、安装打包工具webpck
        cnpm install -g webpack

        cnpm uninstall -g webpack

二、创建Vue项目
    1、cd  项目目录（或者直接从文件夹目录处输入cmd直接运行控制台）
        

    2、新建vue项目(vuedemo为项目名，这个地方会卡一段时间，要下载一些包)    
            vue init webpack vuedemo

    3、以管理员身份进入cmd，再进入项目目录     cd vuedemo
    4、安装依赖      cnpm install
    5、安装loader模块
        cnpm install style-loader -D
        cnpm install css-loader -D
        cnpm install file-loader -D
    6、安装 Element-UI
        cnpm install element-ui --save
    7、修改build/webpack.base.conf.js的配置（代码见备注）

    8、退出管理员的cmd，以普通方式进入cmd，运行项目        cnpm run dev
            运行成功后如下图

    9、可以将Vue文件导入Hbuilder
        在src/main.js文件中导入Element-UI
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css'
        Vue.use(ElementUI)

   10、发布项目 （一般到第九步就可以直接访问了，成功访问如下图，访问路径：http://localhost:8080  或  http://localhost:80，我的就是8080）
         cnpm run build

    main.js
    

三、创建Vue文件
    1、定义Vue文件
    vue 文件，是一种自定义文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块：
   <template>  代表HTML
   <script>   代表JavaScript
   <style>   代表CSS
    一个vue文件其实就是一个vue组件，Vue组件放在components目录下，

    2、配置index.js
        如果要访问Vue组件，必须配置对应的路由，路由统一在router/index.js中配置，配置方法如下：
    导入  import User from '@/components/User’

    3、在app.vue中访问
        配置路由，访问的时候可以通过path或name进行访问
        直接以路径访问：http://localhost:8081/role-mgr
            或者routerlink链接访问

    to属性的值有两种格式：
        name为index.js定义的组件name
        path为index.js定义的组件path
        params和query表示参数，值为json格式
       {name: 'user', params: {userId:123}}
        或
       {path:'/test',query:{a:10,b:20}}
    取参数值：this.$route
        
四、在Vue工程中使用axios和Qs库，需要安装
    qs:    cnpm i qs
    axios:   cnpm install axios -S

局部使用：
    在script标签中，导入
    import axios from 'axios'
    import qs from 'qs'

案例参考：

    

 

 

Element UI地址
https://element.eleme.cn/#/zh-CN/component/installation