一.Vue的使用,详细教程
1.下载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组件中的内容了