vue-cli 3.0安装

安装命令:
npm install -g @vue/cli

如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x),
卸载命令:
npm uninstall vue-cli -g

检查其版本是否正确 (3.x):
vue --version
vue -V

创建一个新项目:
vue create hello-world

windows上的Git Bash交互不是很友好,需要通过
winpty vue.cmd create hello-world
启动上下键选择,space键选中

现有的项目中安装插件:vue-cli-plugin-cube-ui
vue add cube-ui

启动

启动项目:
npm run serve

配置webpack目录别名alias

使用vue.config.js(根目录,默认不存在,需要创建)来配置webpach的一些配置项

链式操作

webpack-chain尝试通过提供可链接或流畅的API来创建和修改webpack配置来改进此过程。

设置别名的结构:
config.resolve.alias
  .set(key, value)
  .set(key, value)
  .delete(key)
  .clear()
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))
  }
}

参考:webpack-chain

注意:

各类非 js 直接引用(import require)静态资源,依赖相对路径加载问题,都可以用 ~ 语法完美解决;

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐