资讯专栏INFORMATION COLUMN

vue-cli3脚手架的使用和相关配置

jsummer / 2997人阅读

摘要:前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时,它也为每个工具提供了调整配置的灵活性,无需。例如,如果你的应用被部署在,则设置为。我们将在下篇文章里详细讲述的使用官方文档

前言

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:

可升级;
基于 webpack 构建,并带有合理的默认配置;
可以通过项目内的配置文件进行配置;
可以通过插件进行扩展。

一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

快速创建一个项目

安装vue-cli3;

注意vue-cli3要求node版本8或者更高以上,(推荐8.10.0+)
安装命令 npm install –g @vue/cli
或者 cnpm install –g @vue/cli 或者 yarn global add @vue/cli
检测是否安装成功

创建项目:

vue create hello-world


第一次创建的时候应该之后后面两个选项,defalut是默认的,包含了babel和eslint; Manually select features是可以手动选择所需要的插件;而demo是作者之前配置过的,保留下来的配置;


按上下箭头选择配置,空格键选中,选择完成后,回车键继续,会依次问询你所选插件的配置,


vue-router选择模式


所用的css预处理语言,我选择了sass;


选择的代码风格和格式校验


代码校验方式,我选择了保存即校验,也可以在add和commit的时候校验;


在哪里保存配置我这些插件的配置,我选择了独立文件


是否保存为保存为一个将来可复用的 preset;
选择完毕之后开始安装插件:


看一下安装完成的项目目录

安装完成之后,cd hello-world,进入文件夹,npm run serve启动项目;
你也可以使用图形化界面
可以通过 vue ui 命令以图形化界面创建和管理项目:


不做重点讲解;

vue.config.js

配置api的地址配置参考#
项目搭建完成,因为 vue-cli 3 的项目初始化,帮开发者已经解决了 80% ,甚至绝大部分情形下的 webpack 配置。但开发过程中难免要遇到需要开发者自己配置的点东西,那我们要如何配置呢,这点就需要在项目根目录下手动新建一个 vue.config.js,此处我提供的一个我们项目中的常用模版;针对以下选项做大概的讲解;

const path = require("path")
const webpack = require("webpack")
module.exports = {
  // 修改output.path
  outputDir: "dist",
  // 修改output.publishPath
  baseUrl: "./",
  chainWebpack: config => {
    // 添加全局scss文件
    const types = ["vue-modules", "vue", "normal-modules", "normal"]
    types.forEach(type => {
      config.module.rule("scss").oneOf(type).use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [
            path.resolve(__dirname, "src/css/base.scss")
          ]
        })
    })
    // 移除 prefetch 插件 //预加载
    config.plugins.delete("prefetch")
    // 引入
    const chunkFolder = process.env.NODE_ENV !== "production" ? "debug" : "dist"
    config.plugin("dll-reference-plugin")
      .use(webpack.DllReferencePlugin)
      .tap(options => {
        options[0] = {
          context: __dirname,
          manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
        }
        return options
      })
    config.plugin("add-asset-html-webpack-plugin")
      .use("add-asset-html-webpack-plugin")
      .tap(options => {
        options[0] = {
          filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
        }
        return options
      })
  }
}

baseUrl:从 Vue CLI 3.3 起已弃用,请使用publicPath
publicPath

Type: string
Default: "/"
部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 http://shop.ktvsky.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 http://shop.ktvsky.com/vue/,则设置 publicPath 为 /vue/。
也可以使用相对路径 "./",这样这样打出来的包可以被部署在任意路径
相对路径的打包后的


绝对路径

outputDir

Type: string 
Default: "dist"
当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

chainWebpack
我们将在下篇文章里详细讲述 chainWebpack的使用https://segmentfault.com/a/11...;
官方文档 https://cli.vuejs.org/zh/guid...

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

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

相关文章

  • vue-cli3手架使用相关配置

    前言 通过 @vue/cli 搭建交互式项目手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖: 可升级; 基于 webpack 构建,并带有合理默认配置; 可以通过项目内配置...

    Sanchi 评论0 收藏0
  • 基于vue-cli搭了一个多页面应用手架

    ...ebpack2.6.1|less|axios] 之前看过有相关朋友share了空多页面手架. 不过down了几个都是webpack1.0或者vue1.0. 刚好项目需要用到vue. 就在vue-cli基础上进行了修改 已经有babel直接用es6即可,如果需要修改配置请到 .babelrc里面修改 并...

    qingshanli1988 评论0 收藏0
  • 深入认识vue-cli:能做不仅仅是初始化vue工程

    ...le CLI for scaffolding Vue.js projects.一个简单Vue.js工程命令行手架工具。 在全局安装vue-cli之后,就可以通过一条命令初始化我们vue工程: vue init 接下来vue-cli就会按照这个模板内部设置,抛出几个问答选项。在回答完问答选...

    AlienZHOU 评论0 收藏0
  • vue-cli安装vs code 相关配置

    ...一样,但是原理实现Jquery不同。 Vue-cli: Vue-cli是一个手架,,能让你非常容易地构建项目,包含了 Webpack,Browserify,甚至 no build system。 Vue安装 一、安装 node.js node.js官网下载node安装包。 安装完成之后打开终端查...

    Loong_T 评论0 收藏0
  • vue-cli差不多React手架

    ...li外表,React心 说在前面 对于我个人来说,一个好手架有助于我们心无旁骛地去学习一些库例如VueReact。vue-cli就是一个非常好例子,简单易用,而且集成了许多流行元素例如ES6热更新之类。我之前写了一个小...

    alin 评论0 收藏0

发表评论

0条评论

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