下载Vue脚手架
1、进入cmd
打开vue保存路径，进入对应的cmd页面
编辑
2、下载脚手架
输入npm install -g @vue/cli
编辑
3、配置淘宝仓库镜像
npm config set registry https://registry.npmmirror.com
创建Vue项目
1、进入cmd页面
打开vue项目保存路径，进入cmd页面，输入vue create [项目名]
编辑
2、选择vue的版本
编辑
3、选择插件
选择需要的插件，按空格取消或选中
编辑
4、选择版本
选择版本，选3 (Element组件对vue3不适配，需要vue2版本)
编辑
5、保存位置
依赖的保存位置
编辑
6、创建快照
以上的选择要不要做一个快照，方便下次创建，输入一个大写的N不保存即可
编辑
7、下载
接下来会联网下载所选择的内容以及vue相关的程序，加载完以后本地就会出现创建的hello项目
编辑
vue基本项目模型
<template> <div> <!--这是页面显示模块--> </div> </template> <script> // 这个位置可以导入组件(这是局部导入) export default { data:function(){ return{ // 定义属性的模块 } }, created:function(){ // 这是一个生命周期，创建时候执行 }, mounted:function(){ // 这是一个生命周期，创建生命周期执行之后执行 // 其余生命周期，可以去vue官网查看 }, methods:{ // 自定义方法的模块 }, comments:{ // 注册组件的容器 } } </script> <style> /*这是css模块*/ </style>
自定义组件导入
注册完容器以后即可使用
<template> <div id="app"> <!--自定义组件--> <NewTable></NewTable> </div> </template> <script> import NewTable from './components/NewTable.vue'; // 第一步：导入路径 export default { components: { NewTable // 第二步：注册容器,定义组件名称 大小写保持一直 } } </script> <style> </style>
补全插件
缺失的组件，在控制终端输入npm install，就会根据package. json重新下载自动下载缺失的组件
添加Element组件
1、组件描述
Element组件是一个快速搭建网络前端界面的组件
2、下载组件
在控制终端输入npm install element-ui，就会自动下载Element组件
访问组件的网络链接：
3、引入主键，全局注册
在main.js中进行配置
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; // 第一步：导入element-ui import 'element-ui/lib/theme-chalk/index.css'; // 第一步：导入element自带的css Vue.config.productionTip = false Vue.use(ElementUI); // 第二步：将组件进行全局注册 j new Vue({ render: h => h(App), }).$mount('#app')
4、使用组件
可以直接去官方文档里面找模板选择复制，套用，访问组件的网络链接：
添加Axios组件
1、组件描述
这是一个发送和获取网络请求的组件，它对ajax进行了封装，更加方便使用
文档：
2、下载组件
在控制终端输入npm install axios，就会自动下载Axios组件
3、发送网络请求
网络请求获取数据一共有两种方法
第一种：局部引入
<template> <div id="app"> </div> </template> <script> import axios from 'axios'; import NewTable from './components/NewTable.vue'; // 第一步：导入路径 export default { data(){ return{ // 定义数组接受获取到的数据 userlist:[], } }, created:function(){ // 这是一个生命周期，创建时候执行 axios({ url:'userinfo/list', method:'GET' }).then(res=>{ this.userinfoList = res.data.massage; console.log(this.userinfoList); }) }, name:'App', components: { NewTable // 第二步：注册容器 }, } </script> <style> </style>
第二种：全局引入
在main.js中导入axios
import Vue from 'vue' import App from './App.vue' import axios from 'axios' // 导入axios axios.defaults.baseURL = "http://localhost:8088" // 配置前半段路径 Vue.prototype.$http = axios // 将axios配置到Vue属性中，this.$http相当于axios $http名字可以自定义 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
发送网络请求
<script> export default { date() { return{ // 定义数组接受获取到的数据 userlist:[], } }, created:function(){ this.$http.get("/user/list").then((res)=>{ this.userlist = res.data.massage; console.log(this.userlist); }) } } </script>
解决跨域问题
从后端解决跨域问题
添加VueRouter路由组件
1、组件描述
这是一个路由组件，负责跳转页面
2、下载组件
在控制终端输入npm install vue-router@3，就会自动下载VueRouter组件，因为创建的是vue2的项目，只有VueRouter3的版本适配所以这里下载VueRouter3的版本
3、创建路由模块
在src下创建router包，在包下创建index.js文件
import VueRouter from "vue-router"; import Vue from "vue"; import Faxianyinyue from '../components/Faxianyinyue.vue' // 自己创建的组件 import Guanzhu from '../components/Guanzhu.vue' // 自己创建的组件 import Wodeyinyue from '../components/Wodeyinyue.vue' // 自己创建的组件 Vue.use(VueRouter) // 将VueRouter设置成vue的插件 const router = new VueRouter({ // 指定hash属性与组件的对应关系 routes:[ // 这里可以设置一个重定向，默认主页自动跳到faixianyinyue中 // '/'是主页 {path:'/',redirect:'/faxianyinyue'}, {path:'/faxianyinyue',component:Faxianyinyue}, // 前面是链接，对应后面的组件 {path:'/guanzhu',component:Guanzhu}, {path:'/wodeyinyue',component:Wodeyinyue}, ] }) export default router // 导出
添加标签和占位标签
<template> <div> <!--声明路由链接--> <router-link to="/faxianyinyue">发现音乐</router-link> <router-link to="/guanzhu">关注</router-link> <router-link to="/wodeyinyue">我的音乐</router-link> <!--声明路由占位标签--> <router-view></router-view> </div> </template>
在main.js中导入一下router
import Vue from 'vue' import App from './App.vue' import router from './router/index' // 这里如果名字叫indes的话，是可以省略不写的，这里以为示范所以加上 Vue.config.productionTip = false new Vue({ render: h => h(App), router:router // 把导出的router，放到new的vue对象中 }).$mount('#app')
