Django + vue （二） vue项目创建

 一、vue环境安装

     1.  安装NodeJS, 下载地址为：http://nodejs.cn/download。下载安装，并把Node添加到系统环境变量里面，打开cmd命令，输入 npm -v可以看到版本号，说明安装NodeJS成功。

     

     然后执行npm install npm -g 命令进行升级(Linux下为sudo npm install npm -g

    2. 淘宝镜像 

        安装成功后，用cnpm替代npm命令,国内镜像，安装速度会快很多。

   3. 安装webpack

     

      webpack可以参考： http://www.runoob.com/w3cnote/webpack-tutorial.html

   4. 安装vue-cli

      安装vue脚手架项目初始化工具vue-cli, -g表示全局安装。

       

   5. 安装Yarn

      Yarn是Facebook发布的node.js包管理器，比npm更快、更高效，可以使用yarn替代npm。

     

    为yarn指定淘宝镜像。

                     yarn跟npm的关系如下：     

 二、vue项目创建

  1. 使用vue-cli来生成一个项目，比py-ui。      

 最后，选择yarn进行安装。然后，分别执行以下两个命令，启动web服务。

 

 运行后，结果是：

 在浏览器访问http://localhost:8080/

 vue启动正常。

三、安装Element

   Element是国内饿了么公司提供的一套开源前端框架，简洁优雅。

   关闭node.js的服务（Ctrl+C），在py-ui目录下，使用命令yarn add element-ui来安装。

    安装后，将element-ui导入项目中，在py-ui目录里，src目录下 main.js里添加语句，见下图红色数字1，2，3标出的语句。     

四、安装axios

     axios是一个基于Promise用于浏览器和Node.js的HTPP客户端。使用yarn add axios命令安装。  

五、安装babel-polyfill，解决Promise未定义的错误。

     其它浏览器会正常，但IE会报错，“Promise未定义”的解决：      

    然后在src目录下的main.js里 import "babel-polyfill"

六、安装SCSS 

     1.后续会用到SCSS编写页面样式，所以先安装好SCSS。这步的安装坑比较大，后来总结如下

     2. 安装好后，在builde文件夹下的webpack.base.conf.js文件的rules标签下添加配置：

     {
        test: /\.scss$/,
        loaders: ['style','css','sass']
     }

     使用时，在页面代码style标签中把lang设置成scss即可。后面的404.vue会展示。

七、修改页面路由

   1、将src目录下的components目录名改为views。添加页面First.vue、404.vue。

     First.vue代码如下：     

<template>
    <div class="page">
        <h2>Home Page</h2>        
        <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
    </div>
</template>
<script>

import axios from 'axios'
export default {
    name:'First',    
    methods:{
        testAxios(){
            axios.get('http://localhost:8080').then(res=>{alert(res.data)})
        },
    }     
}
</script>

     404.vue代码如下：   

<template>
    <div class="site-wrapper.site-page--not-found">
    <div class="site-content__wrapper">
      <div class="site-content">
        <h2 class="not-found-title">404</h2>
        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
        <el-button @click="$router.go(-1)">返回上一页</el-button>
        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>
      </div>
    </div>
  </div>
</template>
<script>

export default {
    name:'404'
}
</script>

<style lang="scss">
  .site-wrapper.site-page--not-found {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    .site-content__wrapper {
      padding: 0;
      margin: 0;
      background-color: #fff;
    }
    .site-content {
      position: fixed;
      top: 15%;
      left: 50%;
      z-index: 2;
      padding: 30px;
      text-align: center;
      transform: translate(-50%, 0);
    }
    .not-found-title {
      margin: 20px 0 15px;
      font-size: 8em;
      font-weight: 500;
      color: rgb(55, 71, 79);
    }
    .not-found-desc {
      margin: 0 0 30px;
      font-size: 26px;
      text-transform: uppercase;
      color: rgb(118, 131, 143);
      > em {
        font-style: normal;
        color: #ee8145;
      }
    }
    .not-found-btn-gohome {
      margin-left: 30px;
    }
  }
</style>

  2. 配置路由

     打开router/index.js添加两个路由，分别对应主页和404页面。     

import Vue from 'vue'
import Router from 'vue-router'
import First from '@/views/Home'   //新添加的路由 
import Lost from '@/views/404'     //新添加的路由
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path: '/404',
      name: 'Lost',
      component: Lost
    }
  ]
})

 在py-ui目录下执行npm run dev命令。发现有问题，索性就把第六步第1小步重新安装一遍，然后再装一次axios（cnpm install --save axios），搞定。