今天完成的事情：vue的学的差不多了
明天计划的事情：继续熟悉vue脚手架使用
遇到的问题：
module.exports = {
devServer: {
host: "localhost",
port: 8081,
proxy: {
"/carrots-admin-ajax/": {
target: "http://dev.admin.carrots.ptteng.com/",
changeOrigin: true,
pathRewrite: {
"^/carrots-admin-ajax/": "./src"
}
},
按照网上方法，在vue脚手架工具中配置虚拟服务器进行跨域就是不能成功拿到数，试过用get方法去请求，法相跨域时可以用的，但是POST报 405 错误，显示接口不可用，很奇怪，网上查的一些方法都不行，有说加请求头的，又说安装qs，代替JSON转码上传数据的（在input框获取的数据打印看了一下就是服务器能解析的字符串格式），全都不行，蒙了，不知道问题出在哪
收获：学习了vue路由模块化：就是把在main.js中引入页面和注册组统一放在一个单独的文件中进行，有利于大型vue项目的组件管理和main.js内可以专门部署依赖包和一些插件的部署，能降低后期项目的管理、维护和再开发（笔记：方便起见，在项目下的src内创建一个router>index.js的文件夹>文件名名字可以自己定义，只要在main.js引入时的路径问文件名不错就行，）
import Vue from "vue";
import VueRouter from "vue-router";
//1.创建组件
import Home from "../views/Home.vue";
import Content from "../components/Content.vue";
import User from "../views/User.vue";
import UserAdd from "../components/User/UserAdd.vue";
import UserList from "../components/User/UserList.vue";
Vue.use(VueRouter); //挂载vuerouter
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
},
{
path: "/content/:aid",
name: "Content",
component: Content
},
{
//2。配置路由
path: "/user", //路由跳转路径
name: "user", //路由明明
component: User, //路由路径相对于的组件（注册）
children: [
{ path: "useradd", component: UserAdd },
{ path: "userlist", component: UserList }
]
}
];
//3.实力化vuerouter
const router = new VueRouter({
mode: "history" /*hash模式修改为history*/, //访问后缀名的文件需要后端配合，使用nginx配置，详情见vue官网
routes //缩写相当于 routes: routes
});
export default router;
VUEX同样时中大型项目开发应运而生的，小项目反而不怎么用：
state单一状态树，一个对象全部的应用层级状态。可以在里面存储项目所需的所有的数据，包括变量，函数，数组，字符串以及一些标签等，同样降低管理难度，后期的再次开发，和样式修改等。创建有点像路由模块化，一样新建（vuex>store.js）文件夹和名，命令行安装:npm i vuex -S
import Vuex from 'vuex'
Vue.use(Vuex)
//1.state在vuex中用于储存数据
var state = {
count: 1,
list: []
}
//vuex 实例化Vuex.state
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
使用时可以直接在想要的页面下引入
import store from '../vuex/store.js'
data同级（方法）
store,//注册
进行调用。
也可以用VUEX的mutation去改变和获取state内的数据，
var mutations = {
incCount(){
++state.count;
},
}
这个可以在引入和注册了store的页内的methods里面直接用函数incCount直接调用
incCount(){
store.commit('incCount',10)
}
内部行数运行。
返回列表
评论