【Vue】记录一下vue项目创建过程(默认已安装完环境)

记录一下vue项目创建过程(默认已安装完环境)

创建过程

• 进入项目目录运行

vue init webpack 项目名

• 进入创建好的目录

npm install   或者  yarn install

• vue中使用axios

出现什么命令禁止啥的，以管理员运行Windows powershell，输入
set-ExecutionPolicy RemoteSigned然后y,即可。

安装

npm install axios -S

在main.js中引入

import axios from 'axios'
import Qs from 'qs'

Vue.prototype.$axios = axios;
Vue.prototype.qs = Qs;

开始使用

   <script>
	export default {
	  name: "HelloWorld",
	  data() {
	    return {
	      returnData: "", //定义一个用于接收后端传过来值的本地变量
	    };
	  },
//页面创建时执行的方法
	  created() {  
	    this.$axios
	      .get(
	        "链接"
	      )
	      .then((response) => {
	        //这里使用了ES6的语法
	        console.log(response.data); //请求成功返回的数据
	        this.returnData = response.data.data;
	      })
	      .catch(
	        (error) => console.log(error) //请求失败返回的数据
	      );
	  },
//自定义方法
	  methods: {
	    getMsgPage(userId, appId) {
	      this.$axios({
	        // url 是用于请求的服务器 URL
	        url: "/user",
	
	        // method 是创建请求时使用的方法
	        method: "get", // 默认是 get
	
	        // baseURL 将自动加在url前面，除非url是一个绝对URL。
	        // 它可以通过设置一个baseURL便于为axios实例的方法传递相对URL
	        baseURL: "https://主前缀/api/",
	
	        //transformRequest允许在向服务器发送前，修改请求数据
	        // 只能用在PUT,POST和PATCH这几个请求方法
	        // 后面数组中的函数必须返回一个字符串，或ArrayBuffer，或Stream
	        transformRequest: [
	          function (data) {
	            // 对 data 进行任意转换处理
	
	            return data;
	          },
	        ],
	
	        // transformResponse在传递给 then/catch 前，允许修改响应数据
	        transformResponse: [
	          function (data) {
	            // 对 data 进行任意转换处理
	
	            return data;
	          },
	        ],
	
	        // headers是即将被发送的自定义请求头
	        headers: { "X-Requested-With": "XMLHttpRequest" },
	
	        // params是即将与请求一起发送的URL参数
	        // 必须是一个无格式对象(plain object)或URLSearchParams对象
	        params: 
	          ID: 12345,
	        },
	
	        // paramsSerializer是一个负责params序列化的函数
	        paramsSerializer: function (params) {
	          return Qs.stringify(params, { arrayFormat: "brackets" });
	        },
	
	        // data是作为请求主体被发送的数据
	        data: {
	          firstName: "Fred",
	        },
	
	        // timeout指定请求超时的毫秒数(0 表示无超时时间)
	        timeout: 1000,
	
	        // withCredentials表示跨域请求时是否需要使用凭证
	        withCredentials: false, // 默认的
	
	        // auth表示应该使用HTTP基础验证，并提供凭据
	        // 这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头
	        auth: {
	          username: "username",
	          password: "password",
	        },
	
	        // responseType表示服务器响应的数据类型，
	        //可以是arraybuffer,blob,document,json,text,stream
	        responseType: "json", // 默认的
	
	        // `maxContentLength` 定义允许的响应内容的最大尺寸
	        maxContentLength: 2000,
	
	        // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
	        // 如果设置为0，将不会 follow 任何重定向
	        maxRedirects: 5, // 默认的
	      });
	    },
	  },
//页面加载完成后执行访问后端的函数
	  mounted() {
	    //页面加载完成后执行访问后端的函数
	  },
	};
	</script>

• 结合Element-ui

yarn add element-ui -s  
 或者 
npm i element-ui -S

main.js里面添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

VScode里面的element-ui提示插件： vscode-element-helper