@vue/cli  是一个基于 Vue.js 进行快速开发的完整系统。

@vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack 和 webpack-dev-server 之上

安装  

如果已安装旧版 需要先卸载旧版本 :

 npm uninstall vue-cli -g 
//or
yarn global remove vue-cli

任一命令安装全局新包:

  npm install -g @vue/cli
//or
yarn global add @vue/cli
//or
cnpm global add @vue/cli

查看版本:

vue --version
//or
vue -V

创建项目:

vue create  my-project # 项目名
# Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。
# 你必须通过 winpty vue.cmd create hello-world 启动这个命令。 # or
npx @vue/cli create appname

创建时会提示  preset 预置项

可以选择默认配置

也可以选择手动配置

Please pick a preset:
> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha) //配置过的预置项(preset)
default (babel, eslint) Manually select features //默认的preset
Manually select features //手动配置需要的preset

在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

同时 现在可以可视化创建项目:

vue ui

命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

webpack 配置

在项目根目录手动创建 vue.config.js

导出一个对象 :

module.exports = {

}

有些webpack 选项不能直接修改

比如 应该修改 vue.config.js 中的 outputDir 而不是修改 webpack 中的 output.path

基于环境有条件地配置行为,或者想要直接修改配置:

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

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
runtimeCompiler: true,
assetsDir: 'static',
productionSourceMap: false, // 生产环境的 source map
parallel: require('os').cpus().length > 1,
configureWebpack: config => {
// 公共配置
// cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
'axios': 'axios'
}
config.resolve.alias = Object.assign({}, config.resolve.alias, {
'src': resolve('src/common'),
'common': resolve('src/views/common'),
'static': resolve('static')
})
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.optimization = {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true, // console
drop_debugger: false,
pure_funcs: ['console.log']// 移除console
}
}
})
]
}
} else {
// 为开发环境修改配置...
}
},
css: {
loaderOptions: {
css: {
importLoaders: 1 // @import 引入的文件可被一个loader处理 (2 可被两个loader处理)
}
}
},
devServer: {
port: 80,
disableHostCheck: true, // 可使用本地host配置的域名访问
proxy: {
'/api': {
agent: new ProxyAgent('http://132.128.11.12'),
target: 'http://132.128.11.12',
ws: false,
changeOrigin: true
}
} }
}

链式操作

@vue/cli  内部的webpack 配置是通过 webpack-chain 维护的。

配置选项:

module.exports = {
baseUrl: '/',
outputDir: 'dist', //打包输出目录默认dist
// assetsDir: 'bbbbb', //放置生成的静态资源 默认 ''
chainWebpack: config => { //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
config.resolve.alias.set('~',path.join(__dirname, '..','src/assets'))
      },

}

更多细节可查阅 vue.config.js 

Owen 的个人博客

@vue/cli 3.x项目脚手架 webpack 配置的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  3. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  4. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  5. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  6. vue爬坑之路(webpack 配置篇)

    在vue cli下 1.npm run dev 打开浏览器在config的index.js中修改autoOpenBrowser为true 关闭sourcemap productionSourceMap ...

  7. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  8. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  9. @vue/cli 构建得项目eslint配置2

    使用ESLint+Prettier来统一前端代码风格 加分号还是不加分号?tab还是空格?你还在为代码风格与同事争论得面红耳赤吗? 正文之前,先看个段子放松一下: 去死吧!你这个异教徒! 想起自己刚入 ...

随机推荐

  1. C#线程处理基本知识

    章节: 线程与线程处理 讨论多线程的优缺点,并概括了可以创建线程或使用线程池线程的几种情形. 托管线程中的异常 描述不同版本 .NET Framework 的线程中的未经处理的异常的行为,尤其是导致应 ...

  2. TextBox的OnTextboxChanged事件里对Text重新赋值带中文, 导致崩溃

    今天遇到一个超级bug, Textbox做了限制, 只能输入数字. 结果在搜狗输入法输入中文时导致崩溃, 出错信息如下: 未处理 System.InvalidOperationException   ...

  3. Global 全局样式基本设置

    1.  默认字体设置,边距设置 html { font-family: sans-serif; /* 默认字体 */ font-size: 100%; /* 在用户调整窗口大小时,字体大小做相应调整. ...

  4. mina2中的线程池

    一.Mina中的线程池模型 前面介绍了Mina总体的层次结构,那么在Mina里面是怎么使用Java NIO和进行线程调度的呢?这是提高IO处理性能的关键所在.Mina的线程调度原理主要如下图所示: A ...

  5. 转:JDBC Request使用方法

    1.   下载mysql jar包 下载mysql jar包 http://dev.mysql.com/downloads/connector/j/ 网盘下载地址:mysql-connector-ja ...

  6. QTreeWidget笔记

    1.QTreeWidget继承自QTreeView. 2.头文件:QTreeWidget 3.简单使用: #include "mainwindow.h" #include < ...

  7. apache配置中的小细节

    configuration error: couldn’t perform authentication错误的解决办法 configuration error: couldn’t perform au ...

  8. 有两种分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器。

     <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" ...

  9. HDU 1512 Monkey King (左偏树+并查集)

    题意:在一个森林里住着N(N<=10000)只猴子.在一开始,他们是互不认识的.但是随着时间的推移,猴子们少不了争斗,但那只会发生在互不认识 (认识具有传递性)的两只猴子之间.争斗时,两只猴子都 ...

  10. POJ 2348 Euclid's Game (博弈)

    题意:给定两个整数,两个人轮流操作,每次可以用较大数减去较小数的整数倍,当一个数变成0时,则结束,问谁会胜. 析:很明显如果 a == b 那么就可以直接结束了,那么如果 a > b我们可以交换 ...