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

Vue-cli

概述

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

主要功能

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

安装

安装环境

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

安装命令

npm install vie-cli -g

验证安装

创建项目

创建方式

手动命令行

vue init webpack test_vue

？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 即可

启动项目 

目录结构

nde_modules 安装依赖

src 源码目录

package.json 项目配置文件

main.js 入口文件

WebPack

概述

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

安装

npm install webpack -g

npm install webpack-cli -g

使用

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

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

配置

如果使用 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 

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

路由配置使用

准备一个内容组件

作为要被跳转展示的页面

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

<style scoped>

</style>

创建文件定义路由

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

 代码如下. 引入 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>

 最终效果

 跳转前 

跳转后