一、基础开发工具
1、安装nodejs软件。
2、安装git软件，代替命令行工具。
https://git-scm.com/downloads 注：* 如何解决Git Bash 面板中的中文乱码问题？右键->options->text->把编码格式改为UTF-8。
3、全局安装nodemon
npm install nodemon -g
4、nrm 源管理，仓库源切换，建议使用淘宝镜像
npm install nrm -g
nrm ls
nrm use taobao
nrm ls5、Github基础操作(本地及远程仓库)
- github协作
将代码保存到暂存区： git add .
将代码提交到本地存储： git commit -m “本次提交的情况”
将本地仓库和远程仓库进行连接： git remote add origin 远程仓库地址
将代码推送至远程仓库： git push -u origin master
将远程仓库代码更新本地： git pull origin master
将指定分支合并到当前分支： git merge 指定分支
将代码从远程仓库指定分支克隆到本地： git clone -b 指定分支名 远程仓库地址
查看本地仓库中的分支： git branchs
创建并切换至新的分支： git checkout -b 分支名
将本地指定分支的代码推送至远程仓库,并在远程仓库创建该分支： git push origin 分支名
强制提交代码 git push -f origin master
//git pull 强制覆盖本地
// 从远程仓库下载最新版本
git fetch -all
// 将本地设为刚获取的最新的内容
git reset --hard origin/master
- Git连接远程仓库
git init
git remote add origin https:///geekxia/node-express-mongoose.git
git pull origin master --allow-unrelated-histories
git add --all
git commit -m '提交'
git push origin master- 常用命令：
npm install —安装package.json文件中所有依赖文件
npm start —运行项目,开启本地服务器
npm run build —打包部署项目
6、安装Postman，用于测试接口。
https://www.getpostman.com/downloads/
二、VUE开发环境搭建
1. 脚手架工具安装：
npm install -g @vue/cli
2. 脚手架工具创建项目：
vue create 项目名称
3. 常用命令
npm run serve 开启本地服务
npm run build 开启生产打包
4. 目录结构
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据（state）
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
5. 常用基础库及其配置:
1. 路由：vue-router
①安装：npm install vue-router
②配置：
——入口文件main.js
import Vue from 'vue'
import App from './App.vue'
// 引入路由文件
import router from "./router.js";
new Vue({
router,
render: h => h(App),
}).$mount('#app')——路由文件router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 引入"首页"路由
import Home from "@/views/home/Home.vue";
//引入"分类页"路由
import Classify from "@/views/classify/Classify.vue";
// 引入"购物车页"路由
import Cart from "@/views/cart/Cart.vue";
// 引入"用户页"路由
import User from "@/views/user/User.vue";
// 引入"登录页面"路由
import Login from "@/views/login/Login.vue";
const router=new VueRouter({
routes:[
// 当路径为空时,进行导航.
{
path:"",
redirect:"/home"
},
// "首页"路由设置
{
path:"/home",
component:Home
},
// "分类页"路由设置
{
path:"/classify",
component:Classify
},
// "购物车"路由设置
{
path:"/cart",
component:Cart
},
// "用户页"路由设置
{
path:"/user",
component:User
},
// 登录界面路由
{
path:"/login",
component:Login
}
]
})
export default router③路由的跳转
前提：
$router：路由器对象
$route：当前路由信息
一、 声明式路由导航 ==>> 即<router-link>
eg： <router-link to='xxx' tag='li'> To PageB </router-link>
注意：<router-link> 会默认解析成 a 标签，可以通过 tag 属性指定它解析成什么标签
<!-- 需要点击按钮进行跳转的按钮 -->
<!-- 首页、分类页、购物车页、用户页公用底部导航条组件 -->
<div id="navBar">
<router-link class="btn" to="/home">
<img :src="navIcons.icon1" alt="">
</router-link>
<router-link class="btn" to="/classify">
<img :src="navIcons.icon2" alt="">
</router-link>
<router-link class="btn" to="/jdm">
<img :src="navIcons.icon3" alt="">
</router-link>
<router-link class="btn" to="/cart">
<img :src="navIcons.icon4" alt="">
</router-link>
<router-link class="btn" to="/user">
<img :src="navIcons.icon5" alt="">
</router-link>
</div>
<!-- 点击之后需要展示出来的组件的地方,一般放在App.vue -->
<router-view></router-view>二、编程式路由导航 ==>> 即写js的方式
相关 API：
- this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) ==>> 队列的方式（先进先出）
- this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) ==>> 栈的方式（先进后出）
- this.$router.back(): 请求(返回)上一个记录路由
- this.$router.go(-1): 请求(返回)上一个记录路由
- this.$router.go(1): 请求下一个记录路由
<div v-for="(message,index) in messages" :key="message.id">
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
<button @click="pushShow(message.id)">push查看</button>
<button @click="replaceShow(message.id)">replace查看</button>
</div>
<button @click="$router.back()">回退</button>
<router-view></router-view>
methods:{
pushShow(id){
this.$router.push(`/home/message/detail/${id}`)
},
replaceShow(id){
this.$router.replace(`/home/message/detail/${id}`)
}
}④路由的传参
日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种：
1）通过动态路由方式
//路由配置文件中 配置动态路由
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//跳转后页面获取参数
this.$route.params.id2）通过query属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
path: '/detail',
query: {
name: '张三'，
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.query3）通过params属性传值
//路由配置文件中
{
path: '/detail',
name: 'Detail',
component: Detail
}
//跳转时页面
this.$router.push({
name: 'Detail',
params: {
name: '张三'，
id: 1,
}
})
//跳转后页面获取参数对象
this.$route.params总结：
1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失
2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。
⑤监听路由变化
VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？当然是利用VUE中的watch，
一、监听路由从哪儿来到哪儿去
watch:{
$route(to,from){
console.log(from.path);//从哪来
console.log(to.path);//到哪去
}
}二、监听路由变化获取新老路由信息
watch:{
$route:{
handler(val,oldval){
console.log(val);//新路由信息
console.log(oldval);//老路由信息
},
// 深度观察监听
deep: true
}
}三、监听路由变化触发方法
methods:{
getPath(){
console.log(1111)
}
},
watch:{
'$route':'getPath'
}- 状态管理工具:
- …
