详解vue-cli3使用
程序员文章站
2023-10-31 12:57:58
近日,vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下.
文档地址
简介
vue cli 是一个基于 vue.js 进行快...
近日,vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下.
文档地址
简介
vue cli 是一个基于 vue.js 进行快速开发的完整系统
使用
<!-- 安装 --> npm install -g @vue/cli <!-- 创建项目 --> npm create new-cli
然后就是配置,可默认(babel,eslint),自定义
自定义有 babel ts pwa vue-router vuex css预处理 以及linter/formatter,unit testing e2e testing
- 选了router 会再次选是否用history模式
- 在这里选了css预处理又会让选 less scss stylus
- eslint 又有几项
- 只防止出错
- airbnb 配置
- 标准配置
- eslint +prettier
- 还有一项是把配置文件如babel,postcss eslint 放单独文件,还是放package.json里,当然单独了
- 最后有个保存配置,以后用
然后就是安装依赖
目录如下
没有cli2版本的build和config,多个babel.config.js
官网介绍是可以新建个vue.config.js进行相关webpack配置,比如
// vue.config.js module.exports = { configurewebpack: { plugins: [ new myawesomewebpackplugin() ] }, //loader chainwebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改它的选项...loader return options }) }, //生产环境关闭map productionsourcemap:false, //基本url baseurl: process.env.node_env === 'production' ? 'http://www.baidu.com' : 'https://www.google.com', outputdir:'dist', //build 目录 assetsdir:'',//asset目录 indexpath:'index.html',//指定index.html 路径 filenamehashing:true,//文件名带hash // multi-page模式,每个“page”应该有一个对应的 javascript 入口文件 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是 <title><%= htmlwebpackplugin.options.title %></title> title: 'index page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' }, //css配置 css: { sourcemap:false,//css source map loaderoptions: { css: { // 这里的选项会传递给 css-loader }, postcss: { // 这里的选项会传递给 postcss-loader } } }, //dev server devserver: { host:127.0.0.1 port:8000, proxy: 'http://localhost:4000', overlay: { warnings: true,//警告 errors: true//错误 } } }
其他
- 可使用vue serve和vue build 对单个vue文件快速开发
- vue ui 图形化界面创建管理项目
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
i5-7600K配什么主板好?Intel第七代处理器i5-7600K搭配主板与参数详解图文教程
-
如何使用eclipse画UML用例图?使用eclipse画UML用例图的方法
-
GTX1050Ti和GTX1060显卡哪个好?GTX1050Ti/GTX1060天梯图性能对比详解
-
Lightroom批量处理的方法详解
-
AMD显卡机型使用任意播放器播放在线视频有声音没图像的解决方法介绍
-
XenServer内核模块编译过程详解
-
mysql触发器之创建使用触发器简单示例
-
Docker中容器数据卷(Data Volume)和数据管理详解
-
详解Centos7 下建立 Docker 桥接网络
-
Docker安装和简单使用入门教程