美文网首页
官方的命令行工具vue-cli

官方的命令行工具vue-cli

作者: 猿分让我们相遇 | 来源:发表于2017-09-20 23:16 被阅读0次

vue-cli官网
Vue-cli是Vue的脚手架工具——主要作用:目录结构、本地调试、代码部署、热加载、单元测试

Vue 提供了一个官方的 CLI/命令行工具,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档
1201

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖

$ cd my-project

$ npm install

$ npm run dev

搭建项目:

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

打包后文件路径错乱
1,打开build/webpack.prod.conf.js,

 output: {
    publicPath:'./',//复制这个
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

2,打开build/utils.js,

if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader',
      publicPath:'../../', //复制这个
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }

相关文章

  • 03、Vue-cli构建项目

    一、Vue-cli脚手架工具 Vue-cli是Vue的脚手架工具,是官方命令行工具 (CLI),脚手架即编写好基础...

  • 03、Vue-cli构建项目

    一、Vue-cli脚手架工具 Vue-cli是Vue的脚手架工具,是官方命令行工具 (CLI),脚手架即编写好基础...

  • 新建vue工程

    1,安装vue-cli脚手架构建工具 vue-cli 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提...

  • vue-cli的简介

    1.安装脚手架工具vue-cli(命令行) 全局安装vue-cli Mac打开终端,windows打开命令行工具输...

  • Vue-cli脚手架工具

    一. 在命令行安装脚手架 Vue-cli是官方提供的脚手架工具,里面默认继承了express以及webpack打包...

  • vue的多页面配置

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用。默认一个页面入口index.html,那么,如果我...

  • 官方的命令行工具vue-cli

    vue-cli官网Vue-cli是Vue的脚手架工具——主要作用:目录结构、本地调试、代码部署、热加载、单元测试 ...

  • Vue(一)vue-cli搭建Vue项目

    vue项目搭建 vue项目快速搭建工具——vue-cli vue-cli是基于node环境的一个命令行工具。也就是...

  • vue-cli 入门

    安装vue-cli 打开 cmd 命令行工具,输入npm install -g vue-cli,回车 全局安装vu...

  • vue-cli入门(一)

    安装vue-cli 打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-...

网友评论

      本文标题:官方的命令行工具vue-cli

      本文链接:https://www.haomeiwen.com/subject/ewfnsxtx.html