vue前端环境配置

阔爱滴二狗子

已于 2023-05-12 16:41:46 修改

阅读量1k

点赞数

分类专栏： vue 文章标签：前端 vue.js git

于 2020-04-30 08:40:23 首次发布

本文链接：https://blog.csdn.net/qq_43440659/article/details/105853629

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、基础开发工具

1、安装nodejs软件。

http://nodejs.cn/download/

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 ls

5、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://github.com/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.id

2）通过query属性传值


//路由配置文件中
{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }
//跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三'，
    id: 1,
  }
})
 
//跳转后页面获取参数对象
this.$route.query

3）通过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'
}

状态管理工具:
…

阔爱滴二狗子

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue前端环境配置

一、基础开发工具1、安装nodejs软件。http://nodejs.cn/download/2、安装git软件，代替命令行工具。https://git-scm.com/downloads注：* 如何解决Git Bash 面板中的中文乱码问题？右键->options->text->把编码格式改为UTF-8。3、全局安装nodemonnpm install nodem...
复制链接

扫一扫

专栏目录