• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

VUE 相关工具 vue-cli/webpack/vue-router

开发技术 开发技术 6小时前 5次浏览

Vue-cli

概述

vue-cli 是用于快速生成 vue 项目框架的一个工具

主要功能

  • 统一目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

安装

安装环境

  • Node.js (>=6.x, 首选 8.x)
  • git

安装命令

npm install vie-cli -g

验证安装

VUE 相关工具 vue-cli/webpack/vue-router

创建项目

创建方式

手动命令行

vue init webpack test_vue

VUE 相关工具 vue-cli/webpack/vue-router

?Project name —- 项目名称,init命令时也填了个project-name,如果无需更改,直接回车即可;
?Project description —- 项目描述,按需填写。无需填写可以直接回车;
?Author —- 作者
?Vue build —- 构建模式,一般默认第一个
?Install vue-router? —- 是否安装vue-router
?Use ESLint to lint yout code? —- 格式校验
?Set up unit tests —- 测试相关
?Setup e2e tests with Nightwatch? —- 测试相关
?Should we run ‘npm install’ for you after the project has been created? —- 按需,这里选yes, use NPM, 之后自己在目标
目录下执行npm install即可。

启动命令 

cd 项目目录
npm install 
npm run dev

webstorm

webstorm 创建则直接项目选择选择 vue 即可

启动项目 

VUE 相关工具 vue-cli/webpack/vue-router

目录结构

VUE 相关工具 vue-cli/webpack/vue-router

nde_modules 安装依赖

src 源码目录

package.json 项目配置文件

main.js 入口文件

VUE 相关工具 vue-cli/webpack/vue-router

WebPack

概述

用于ES6 语法重封装成通用的 ES5语法的打包工具

安装

npm install webpack -g

npm install webpack-cli -g

使用

切换到项目目录中后命令 webpack 即可

可跟参数 –watch 保持跟踪改变会让进程保持监听

配置

VUE 相关工具 vue-cli/webpack/vue-router

VUE 相关工具 vue-cli/webpack/vue-router

如果使用 vue-cli 版本较新, 将不会创建 build 文件夹

如果要配置webpack 在项目根目录下创建vue.config.js 在里面进行需要的配置

vue-router

概述

vue 官方发布的路由管理器主要功能有 官方链接

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

安装

进入项目目录后

npm install vue-router --save-dev

安装完成后可以看到配置文件里面的 dev 环境下多了 vue-router 

以及依赖文件夹下也有了相关的文件包 

VUE 相关工具 vue-cli/webpack/vue-router

路由配置使用

准备一个内容组件

作为要被跳转展示的页面

<template>
    <div>我是内容页</div>
</template>
<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

创建文件定义路由

在 src 下创建 router 文件夹下创建 index.js

VUE 相关工具 vue-cli/webpack/vue-router

 代码如下. 引入 VueRouter 新建实例并暴露

绑定相关组件作为路由的跳转内容

import Vue from 'vue'
import VueRouter from "vue-router";
import Content from "@/components/Content";

Vue.use(VueRouter)

export default new VueRouter({
    routes: [{
        // 路由跳转路径
        path : "/content",
        // 路由名称
        name : "Content",
        // 路由跳转组件
        component: Content
    }]
})

注册路由

 在 main.js 里面的 Vue 实例中进行引用注册

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

// 使用 Vue-Router
Vue.use(VueRouter);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

使用路由

App.vue 中, router-link 标签作为跳转使用, router-view 标签进行跳转后的页面渲染

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <router-link to="/content">Go to content</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

    export default {
        name: 'App'
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

 最终效果

 跳转前 

VUE 相关工具 vue-cli/webpack/vue-router

跳转后

VUE 相关工具 vue-cli/webpack/vue-router

 


程序员灯塔
转载请注明原文链接:VUE 相关工具 vue-cli/webpack/vue-router
喜欢 (0)