声明:本文章都是由我的老师纯手工打造,我只是个搬运工,因为我不知道老师的博客,,点的是原创。。。。(惭愧
如何创建一个vue项目:
- 安装node.js
- 设置npm的registry(默认的下载地址是国外的太慢,用这个命令注册成国内镜像服务器)
npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
- 安装webpack
npm install webpack -g
- 全局安装vue-cli (vue项目脚手架)
npm install -g vue-cli
- 用vue脚手架创建一个vue项目
vue init webpack my-project (项目名)
运行会问你很多问题,第1个选 Y ,其它的都选 N ,最后一个选 NPM。运行完
cd my-project (进入项目文件夹)
npm install
npm run dev (运行项目,默认端口号是8080,在浏览器上访问http://localhost:8080,出现vue默认页面,即安装成功。ctrl+C 关闭服务)
- 安装项目运行环境
npm install --save axios (用于向后端服务器发送ajax请求)
npm install element-ui -S (前端UI,可根据需要选择其它UI)
npm install vue-router -S (路由,用于页面跳转)
npm install vuex --save (专为 Vue.js 应用程序开发的状态管理模式,太他妈扯了!简单说用于跨页面传送数据)
好了,至此前端项目搭建完毕,可以把它拖到hBuilderX里,进行前端项目开发了。
vue-router:
Vue-router 即vue项目中运用的路由器,说白了就是用来在vue项目中做页面跳转的。它可以让我们在项目中进行主页面的跳转或局部页面内容的跳转。
vue-router要在vue项目中正常使用要先导入,再定义,再引入,最后是使用
一、导入
可使用vue项目的脚手架,手动设置项,进行vue-router的导入。
注:vue2.0,和vue3.0所使用的vue-router不一样。
二、定义
在src文件夹下新建一个router的文件夹
新建一个index.js文件
vue2.0:
import Vue from 'vue'
import Router from 'vue-router'
const originalPush = Router.prototype.push<