VUE下载安装与配置

VUE下载安装与配置

1. 安装node，官网下载，一路下一步

2. 安装模块： npm install 模块名 注: npm比较慢，用淘宝的cnpm来替换npm

    npm install -g cnpm --registry=https://registry.npm.taobao.org
   

3. 创建vue的工程

   cnpm install -g @vue/cli
   

4. 如果出问题执行如下，重新走3,4

   npm cache clean --force
   

5. 安装成功后命令行敲： vue

6. 创建vue项目：切换到指定目录再创建

   vue create 项目名
   

• 剩下的按提示来即可

vue项目目录介绍

public
    -favicon.ico   # 
    -index.html    #整个项目的单页面
src
    -assets  #静态文件，js，css，img
    -components # 小组件，头部组件，尾部组件
    -router     # 路由相关
    -store      # vuex相关，状态管理器，临时存储数据的地方
    -views      # 页面组件
    -App.vue    # 根组件
    -main.js    # 配置文件（跟django的setting一样）
    
    
.vue文件    
#任何一个组件都有三部分
	<template>
    	#html相关
	</template>
    <style>
		# css相关
	</style>

    <script>
		# js相关
    </script>

vue配置打通前端通信

前端可以发送ajax的请求，axios
下载:
	cnpm install axios
配置在main.js中
	import axios from 'axios'   //导入安装的axios
//相当于把axios这个对象放到了vue对象中，以后用  vue对象.$axios
	Vue.prototype.$axios = axios;

使用（某个函数中）
export default {
  created() {
    // 向后端发请求
    this.$axios.get('http://127.0.0.1:8001/user/text/').then(response => {
      alert(response.data)
    }).catch(errors => {
      alert(errors.data)
    })
  }
}

es6的箭头函数
    function (response) { console.log(response)}
	等同于
    response=>{ console.log(response)}