vue-cli3简单使用配置

时间 2019-11-10

标签 vue cli3 cli 简单使用配置繁體版

原文原文链接

1.下载安装vue-cli3，这里我使用npm安装

npm install -g @vue/cli

若是已经安装以前版本（1.x或2.x）须要先卸载，再安装新的版本。
安装完成后能够经过vue --version命令查看版本css

2.建立一个项目

vue-cli3和以前建立一个项目的命令不一样html

vue create project-name    // vue-cli3
vue init wepack project-name    //vue-cli2

以后就是建立项目时的一些选项，根据须要选择，须要注意的是若是不是很熟悉，不要开启语法检查。而后就等文件下载完毕。
vue

等文件下载完毕打开项目，发现项目结构和以前的版本有点不一样，config和build文件夹不见了，index.html文件也不见了，却多了pubilc文件夹。打开public发现index.html文件在这里。vue-cli

3.配置

以前的配置文件都不见了，应该怎么修改配置呢，咱们能够在项目下和package.json文件同级目录下新建vue.config.js文件，这是一个可选文件，若是存在就会被@vue/cli-service自动加载。
这个文件格式应该为：npm

// vue.config.js
module.exports = {
  //  选项...
}

导出的对象有多个选项，具体能够查看官方文档https://cli.vuejs.org/zh/config/
用过vue-cli2的同窗应该都知道，若是按照默认的配置，文件的路径是会有问题的，须要手动修改。好比css文件、js文件、还有图片等静态资源。
新版本的脚手架修改起来就比较方便了，只须要在vue.config.js里面加上一行json

//  vue.config.js
module.exports = {
   baseUrl: './',  // 配置基本url
}

baseUrl的详细解释能够去官网查看。
vue-cli3还给出了多页面的配置选项pages，这比以前配置多页面要方便的多。数组

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 而且若是找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

上面是官网给出的代码，其中除了entry以外都是可选的。
下面开始新建文件，在src文件加下新建pages文件夹：

里面每一个文件夹都是一个单独的页面，里面有对应的js、vue、html文件。其实每个文件夹就至关于一个单页面应用，写法和单页面相同。若是须要用到路由能够写在里面，也能够在外边单独建一个router的文件夹集中管理。这里只写出index的代码,其余都是相似的。
index.htmlui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="index"></div>

</body>
</html>

index.jsurl

import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount('#index');

index.vuespa

<template>
    <div>
        <h1>index</h1>
        <a href="view1.html">view1</a>
        &nbsp;
        &nbsp;
        &nbsp;
        &nbsp;
        <a href="view2.html">view2</a>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>

这里注意页面跳转是用的<a>连接，由于这是页面之间跳转，而不是路由。
接下来须要在vue.config.js里面进行多页面的配置。

//  vue.config.js
const utils  = require('./utils/utils');

module.exports = {
    baseUrl: './',
    pages: {
        index: {
             entry: 'src/pages/index/index.js',
             template: 'src/pages/index/index.html',
             filename: 'index.html',
        },
        view1: {
             entry: 'src/pages/view1/view1.js',
             template: 'src/pages/view1/view1.html',
             filename: 'view1.html',
        },
        view2: {
             entry: 'src/pages/view2/view2.js',
             template: 'src/pages/view2/view2.html',
             filename: 'view2.html',
        },
    }
}

这里我只写了三个属性，而后运行项目就行了。

npm run serve

效果图

以后若是要增长页面就在vue.config.js文件里面的pages选项里面增长就行了，可是若是一个一个的手动增长，感受麻烦，也容易出错，那就再简单的配置一下自动读取到pages文件夹里面有哪些页面。
1.首先安装glob模块，接下来会用到。

npm install glob

在src同级目录新建utils文件夹，里面新建utils.js文件。

const glob = require("glob");
const PAGE_PATH = './src/pages';  // 注意是./ 而不是../ 这可能和commen.js的加载有关系

module.exports = {
    getPages: () => {
        
        //  首先获得包含pages文件夹里面符合条件的路径数组
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');

        //  pages就是vue.config.js里面pages选项的值，是一个对象
        let pages = {};

        //  遍历获得的路径数组，从字符串中分割出须要的页面名字
        entryHtml.forEach((filePath) => {
            let fileName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));

         //  组建pages须要的值
            pages[fileName] = {
                entry: `src/pages/${fileName}/${fileName}.js`,
                template: `src/pages/${fileName}/${fileName}.html`,
                filename: `${fileName}.html`
            }
        });
        return pages;
    }
};

而后在vue.config.js里面引入

//  vue.config.js
const utils  = require('./utils/utils');

module.exports = {
    baseUrl: './',
    pages: utils.getPages()
}

到这里一个简单的多页面项目就算配置完了，以前也用vue-cli2配置过多页面应用，感受vue-cli3比以前要方便也更容易配置。好了，有错误欢迎指出，谢谢！😀😀