Vue的使用，详细教程

一.Vue的使用，详细教程

1.下载Node.js

 下载 | Node.js

2.检查是否安装成功

安装完成后，使用 node -v 和 npm -v在命令提示符窗口中查看是否安装成功

 下面显示版本号就说明安装成功了

3.修改Node.js配置信息

找到安装的目录，在安装目录下新建两个文件夹 node_global 和 node_cache 

 打开命令提示符窗口输入这两行代码 每行代码后面的路径为刚刚新建的路径，注意区分

npm config set cache C:\Pumpkin\nodejs\node_cache

npm config set prefix C:\Pumpkin\nodejs\node_global

设置淘宝源

npm config set registry https://registry.npm.taobao.org

 4.安装vue-cli脚手架

在命令提示符窗口输入

#i : install
#-g :  全局安装
npm i -g @vue/cli

5.使用脚手架新建项目

#vue create  创建
# demo 项目名称
vue create demo

6.npm i XXX -x的意思

i是install的缩写
-g 是npm install xx --global的缩写，可以理解为安装到自己电脑上的npm仓库里
-S 是局部安装，可以理解为安装到项目中的dependencies下
-d 也是局部安装，可以理解为安装到项目中的devDependencies下

7.安装Element-Ui

使用npm i element-ui -S

npm i element-ui -S

安装完成后，在项目中的main.js中引入elementui

 8.安装axios

npm install axios

安装完成后，在src-api目录下新建axiosconfig.js文件，内容为：

import axios from 'axios'    //引入axios

const request = axios.create({
	baseURL:'/api',
	timeout:600 //请求超时时间
})

export default request   //将实列导出

在src-api目录下再新建http.js文件，用于装请求，将所有的请求封装在此，内容为:

import request from '@/api/axiosconfig.js'   //引用axios实列

export function findAll(){   //封装请求方法
    return request.get('/test');  //发送get请求
}

使用方式：

 也可以在mian.js中使用这种方式

 这样我们就能直接在srcipt中用这种形式来使用

 9.安装router

npm i vue-router

安装完成后在src-api目录中新建router.js文件，文件内容为：

 然后在main.js中引入上图导出的router

import router from '@/api/router.js'




new Vue({
  router,   //在Vue实列这里添加进去
  render: h => h(App)
  
}).$mount('#app')

此时访问/目录是就会显示b组件中的内容了