zoukankan      html  css  js  c++  java
  • vue-cli 3.0脚手架创建vue项目

    1. 卸载vue-cli 2.0

    npm uninstall -g vue-cli

    2. 安装vue-cli 3.0

    npm install @vue/cli

    3. 创建项目

    npm create <项目名>

    4. 如果创建出现如下错误: Unexpected end of JSON input while parsing near '...ownload/webpack-0.3.2',则继续下面的步骤。

    5. 执行下面两个操作

    (1)npm install --registry=https://registry.npm.taobao.org

    (2)npm cache clean --force

    (3)删除原来创建的项目文件,重新执行第3条命令 npm create <项目名>

    6. 执行npm run serve,即可启动服务,可通过浏览器打开页面链接

    成功创建的项目目录结构如下:

     7.  可根据需要在项目根目录添加vue.config.js配置文件,并输入如下内容:

     1 module.exports = {
     2      // 基本路径
     3      publicPath: '/',
     4      // 输出文件目录
     5      outputDir: 'dist',
     6      // 用于嵌套生成的静态资产(js,css,img,fonts)的目录。
     7      assetsDir: '',
     8      // 以多页模式构建应用程序。
     9      pages: undefined,
    10      // eslint-loader 是否在保存的时候检查
    11      lintOnSave: true,
    12      // 是否使用包含运行时编译器的Vue核心的构建。
    13      runtimeCompiler: false,
    14      // 默认情况下babel-loader忽略其中的所有文件node_modules。
    15      transpileDependencies: [],
    16      // 生产环境sourceMap
    17      productionSourceMap: true,
    18      // webpack配置
    19      configureWebpack: () => {},
    20      chainWebpack: () => {},
    21      // css相关配置
    22      css: {
    23       // 启用 CSS modules
    24       requireModuleExtension: false,
    25       // 是否使用css分离插件
    26       extract: true,
    27       // 开启 CSS source maps?
    28       sourceMap: false,
    29       // css预设器配置项
    30       loaderOptions: {},
    31      },
    32      // webpack-dev-server 相关配置
    33      devServer: {
    34       host: '0.0.0.0',
    35       port: 8080,
    36       https: false,
    37       hotOnly: false,
    38       proxy: null, // 设置代理
    39       before: app => {}
    40      },
    41      // enabled by default if the machine has more than 1 cores
    42      parallel: require('os').cpus().length > 1,
    43      // PWA 插件相关配置
    44      pwa: {},
    45      // 第三方插件配置
    46      pluginOptions: {
    47       // ...
    48      }
    49 }

      

  • 相关阅读:
    Security headers quick reference Learn more about headers that can keep your site safe and quickly look up the most important details.
    Missing dollar riddle
    Where Did the Other Dollar Go, Jeff?
    proteus 与 keil 联调
    cisco router nat
    router dhcp and dns listen
    配置802.1x在交换机的端口验证设置
    ASAv931安装&初始化及ASDM管理
    S5700与Cisco ACS做802.1x认证
    playwright
  • 原文地址:https://www.cnblogs.com/zhcBlog/p/12274133.html
Copyright © 2011-2022 走看看