资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue-cli3简单使用配置

vue-cli3简单使用配置

xavier / 1813人阅读

摘要：下载安装，这里我使用安装如果已经安装之前版本或需要先卸载，再安装新的版本。还给出了多页面的配置选项，这比之前配置多页面要方便的多。接下来需要在里面进行多页面的配置。

1.下载安装vue-cli3，这里我使用npm安装 
npm install -g @vue/cli

如果已经安装之前版本（1.x或2.x）需要先卸载，再安装新的版本。
安装完成后可以通过vue --version命令查看版本

2.创建一个项目

vue-cli3和之前创建一个项目的命令不同

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

之后就是创建项目时的一些选项，根据需要选择，需要注意的是如果不是很熟悉，不要开启语法检查。然后就等文件下载完毕。

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

3.配置

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

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

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

//  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 标签需要是 <%= htmlWebpackPlugin.options.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.html




    
    Title

index.js

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

Vue.config.productionTip = false;

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

index.vue

这里注意页面跳转是用的链接，因为这是页面之间跳转，而不是路由。
接下来需要在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比之前要方便也更容易配置。好了，有错误欢迎指出，谢谢！

GPU云服务器 云服务器 vue-cli3 简单使用 vue-cli 简单路由-域名配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97875.html

相关文章

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

    xuweijian 评论0 收藏0

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

    UsherChen 评论0 收藏0

  • 如何配置 vue-cli 3.0 的 vue.config.js

    摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

    ZoomQuiet 评论0 收藏0

  • vue-cli3.x 新特性及踩坑记

    摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

    xiaoqibTn 评论0 收藏0

  • 深入认识vue-cli：能做的不仅仅是初始化vue工程

    摘要：借助，我们通过非常简单的问答形式，方便地初始化一个工程，完全不需要担心繁复的配置等等。简单来说，就是不仅仅能初始化工程，理论上能够初始化一切工程，包括，等等等等，只要你有一份能够运行的模板，就能够通过进行工程的初始化。 相信对于大部分使用过VueJS的同学来说，vue-cli是他们非常熟悉的一个工具。借助vue-cli，我们通过非常简单的问答形式，方便地初始化一个vue工程，完全不需要...

    AlienZHOU 评论0 收藏0

发表评论

登陆后可评论

0条评论

xavier

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<