- 安装node.js(官网下载,安装时一直下一步即可)
- 下载安装安装vue-cli
npm install --global vue-cli
- 创建一个基于webpack的新项目
- 这里要先在命令行中cd到你要创建vue项目的位置
vue init webpack studentmanage
这里有可能会出问题,下面列举了我第一次创建项目遇到的问题
npm vue-cli -g无法下载问题
VUE - VUE INIT WEBPACK PROJECT 报错处理(无限DOWNLOADING TEMPLATE)
vue init webpack-simple project 报错处理(connect ETIMEDOUT 192.30.253.112)
到这里项目就创建好了,按照上面的提示,输入
cd studentmanage
npm run dev
出现这样的页面就算完成啦,在网页中输入http://localhost:8080就可以看到vue的首页啦
用自己的IDE(我用的是HbuilderX)打开刚刚创建的vue项目,项目结构如下
在src目录下创建一个目录,之后页面的代码都将在此目录下
在route目录下的index.js中添加刚刚创建的vue的路由方便显示
这里的path是“\”,就是表明一会儿打开localhost:8080显示的就是这个组件,之后页面的跳转也会在这里进行配置。
页面跳转的方法:
this.$router.push({
path: "在route目录下已经配置过的路径",
query: {给跳转页面传递的参数
name:'张三'
}
});
获取来自上一个页面的参数
this.name=this.$route.query.name;
使用ajax获取后台数据,这个需要通过npm下载axios(npm install --save axios),并在< script>标签内倒入
axios.get('url').then(回调函数)