Vue CLI3

开始

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：

vue create my-project
# OR
vue ui

可以通过 vue ui 命令使用 GUI install 和管理应用

vue ui

详细操作vue ui：

https://www.baidu.com/link?url=R7zj_u_2FVdEgrzZWu0121-IH-xRigy_gtQY1NQal715jK9bHZvHic4MHujZuCz3QXKkF2iaiNi40ZA_UDSsZ_&wd=&eqid=b78cb55000002eb0000000065ce773f2

https://yq.aliyun.com/articles/622961#

在现有的项目中安装插件:vue add

vue add @vue/eslint

vue add 的设计意图是为了安装并调用Vue CLI插件 .这不意味着替换掉普通的npm包。对于这些普通的npm包，你任然需要选用包管理器

warn(警告)：我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并且很有可能更改你现有的file

也可以向安装的插件传递生成器选项(这样做会跳过命令提示): vue add @vue/eslint --config airbnb --lintOn save

vue-router 和 vuex 的情况比较特殊--他们并没有自己的插件。但是你任然可以这样添加他们

vue add router
vue add vuex

如果一个插件插件语句被安装，你可以使用 vue invoke 命令跳过安装过程，只调用他的生产器。这个命令会接收和vue add 相同的参数

Preset

一个Vue CLI preset 是一个包含create new project所需preset option 和 plugins 的JSON对象，让用户无需再命令提示中选择他们。在vue create 过程中save的preset 会被放在你的home folder下的一个配置文件中(~/.vuerc)你可以通过直接edit这个file来调整、add、delete保持好的preset

Sample: {"userConfigFiles":true,"router":true,"vuex":true,"cssPrepreocessor":"sass","plugins":{"@vue/cli-plugin-babel":{},"@vue/cli-plugin-eslint":{"config":"airbnb","lintOn":["save","commit"]}}
}

vue.config.js 配置

// vue.config.js 配置说明
module.exports = {// baseUrl  type:{string} default:'/' // 将部署应用程序的基本URL// 将部署应用程序的基本URL。// 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。// https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'// outputDir: 'dist',// pages:{ type:Object,Default:undfind }
/*构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目的字符串，注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/// pages: {// index: {// entry for the page// entry: 'src/index/main.js',// the source template// template: 'public/index.html',// output as dist/index.html// filename: 'index.html'// },// when using the entry-only string format,// template is inferred to be `public/subpage.html`// and falls back to `public/index.html` if not found.// Output filename is inferred to be `subpage.html`.// subpage: 'src/subpage/main.js'// },//   lintOnSave：{ type:Boolean default:true } 问你是否使用eslintlintOnSave: true,// productionSourceMap：{ type:Bollean,default:true } 生产源映射// 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建productionSourceMap: false,// devServer:{type:Object} 3个属性host,port,https// 它支持webPack-dev-server的所有选项devServer: {port: 8085, // 端口号host: 'localhost',https: false, // https:{type:Boolean}open: true, //配置自动启动浏览器// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}},  // 配置多个代理}
}

vue-cli 3.0 中 vue.config.js 配置路径别名

const path = require('path');
function resolve (dir) {return path.join(__dirname, dir)
}
module.exports = {lintOnSave: true,chainWebpack: (config)=>{config.resolve.alias.set('@$', resolve('src')).set('assets',resolve('src/assets')).set('components',resolve('src/components')).set('layout',resolve('src/layout')).set('base',resolve('src/base')).set('static',resolve('src/static'))}
}

Vue CLI3 基本使用配置；相关推荐

Vue cli3使用jQuery控件
背景介绍由于历史遗留问题需要使用之前基于jQuery的代码,其中还用到了一个基于jQuery的多选控件,环境是vue cli3 导入并配置jQuery 首先通过npm导入jQuery npm ins ...
vue/cli3 配置vux
安装各插件试过安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style ...
Vue Cli3安装配置步骤
一.准备工作: mac系统的前面加上sudo获取管理员权限安装node.js(自带了软件包管理工具npm) 安装webpack,命令: sudo npm install webpack -g //- ...
Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...
vue cli3 热更新保存时自动刷新页面内容 + 分离环境变量.env package.json配置
前几天ts+vue3.0+view-design撸了一个项目,然后总感觉哪里不对劲,今天终于醒悟了原来是热更新没开在vue.config.js中配置以下选项 const IS_PRO = ['pro ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...

Vue CLI3 基本使用配置；

Vue CLI3

开始

vue-cli 3.0 中 vue.config.js 配置路径别名

Vue CLI3 基本使用配置；相关推荐

最新文章

热门文章