脚本宝典收集整理的这篇文章主要介绍了vue-cli3.x 新特性及踩坑记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性了。
以下的安装都是在 macOS 的环境下进行的,当然在 windows 和 linus 下也同理。
vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
你还可以用这个命令来检查其版本是否正确 (3.x):
vue --version
或者:
vue -V
你也可以通过 vue ui 命令以图形化界面创建和管理项目:
vue ui
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
vue create vue-webpack-demo
// 1. 进入项目
cd vue-webpack-demo
// 或者 cd vue-webpack-demo2
// 2. 安装依赖
npm i
// 3. 启动
npm run serve
npm run dev 或者 npm start
改变为:
npm run serve
const path = require('path');
module.exports = {
// 基本路径
baseUrl: './',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production';
} else {
// 为开发环境修改配置...
config.mode = 'development';
}
Object.assign(config, {
// 开发生产共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components')
}
}
});
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// proxy: {
// // 设置代理
// // proxy all requests starting with /api to jsonplaceholder
// 'http://localhost:8080/': {
// target: 'http://baidu.com:8080', //真实请求的目标地址
// changeOrigin: true,
// pathRewrite: {
// '^http://localhost:8080/': ''
// }
// }
// },
before: (app) => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
具体配置看官方文档:
vue-cli 3.0
简单的配置方式
我都不记得在装什么包的时候修改了 mac 中 npm 的全局路径了,平时 npm 运行各种命令不报错。
全局卸载 vue-cli 命令行:
npm uninstall vue-cli -g;
但是今天全局卸载 vue-cli 的时候一直不成功,搞了一个小时,结果看了一下 npm 的全局路径,才发现路径不对!!!
如果你的 npm 的全局路径也变了,请按如下步骤修改加默认的。
方法一:
原因:npmr 的配置改变了,导致正确的 npmr 不能用。
cd
open .npmrc
方法二:
npm config set prefix /usr/local //是默认路径 修改了路径会出现错误。
按上面的方法修改完,再全局卸载 vue-cli 果然就成功了。
你以为本文就这么结束了 ? 精彩在后面 !!!
对 全栈开发 有兴趣的朋友可以扫下方二维码关注我的公众号
我会不定期更新有价值的内容。
微信公众号:BiaoChenXuYing
分享 前端开发、后端开发 等相关的技术文章,热点资源,全栈程序员的成长之路。
关注公众号并回复 福利 便免费送你六套视频资源,绝对干货。
福利详情请点击: 免费资源分享——Python、Java、Linux、Go、node、vue、react、javaScript
以上是脚本宝典为你收集整理的vue-cli3.x 新特性及踩坑记全部内容,希望文章能够帮你解决vue-cli3.x 新特性及踩坑记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。