vue cli3全家桶 项目开发

详细请看vue cl3、vuex、vue-router、ant design vue、axios搭建一个简易的单页面应用


项目依赖Nojs.js环境,安装教程
如何创建vue cli3项目,创建教程
如何创建引入全家桶,引入教程


当前项目使用的是ant design vueUI,遵守官方规则

UI框架搭建(创建页面)
根据UI库搭建各种静态HTML页面
vue cli3全家桶 项目开发_第1张图片
vue cli3全家桶 项目开发_第2张图片
vue cli3全家桶 项目开发_第3张图片
vue cli3全家桶 项目开发_第4张图片
vue cli3全家桶 项目开发_第5张图片


写入交互(JS)

如何页面跳转(传参)
首先需要注册路由

vue cli3全家桶 项目开发_第6张图片
方式1

<router-link to='edit'><button>点我到编辑不传参</button></router-link>
<router-link to='edit/999'><button>点我到编辑传参</button></router-link>

方式2

methods:{
     goTo(){
     	//不传参
   		this.$router.push({path:'/edit'});
   		//传参
   		this.$router.push({path:'/edit/999'});
   		//或者
		this.$router.push({
          name: 'edit',
          params: {
            user_id: 999
          }
        })
     }
}

如何获取参数

created() {
	console.log(this.$route.params.user_id)
},

如何列表渲染
我使用的是ant design vue规则渲染或使用v-for

vue cli3全家桶 项目开发_第7张图片

你可能感兴趣的:(前端,Js,vue)