[email protected]使用方式和之前版本的差异

2018年8月10号,vue-cli3.0面世

@2.9.3的使用
1.下载vue-cli和安装项目
cnpm i -g vue-cli#2.9.3

vue init webpack my-app

@3.0以上,目前beta版本的使用
1.下载vue-cli和安装项目
npm install -g @vue/cli

vue create <Project Name> //文件名 不支持驼峰(含大写字母)

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

Vue CLI 3.0与其他的版本完全不同,它经历了重构,目的是:

1.尽可能减少现代前端工具在配置上的烦恼,尤其是在开发者将多个工具混合使用时;

2.尽可能在工具链中加入最佳实践,并让其成为Vue应用程序的默认实践。

Vue CLI的核心目标是为基于webpack 4构建的预配置构建提供设置,目标是最大限度地减少开发人员配置的次数,所以Vue CLI 3对具有以下特点的项目都支持开箱即用:

预配置webpack功能,如模块热替换、代码拆分、 摇树优化(tree-shaking)、高效持久化缓存等;

通过Babel 7 + preset-env(Babel插件)对 ES2017进行转换和基于使用情况注入polyfill

支持PostCSS(默认启用autoprefixer)和所有主要的CSS预处理器

Modern mode:并行发布原生ES2017 +bundle和传统bundle

多页面模式:构建具有多个HTML / JS入口点的应用程序

构建目标:将Vue单文件组件构建成为库或原生Web组件(详情如下)

可以在创建新项目时混合选用多种集成:

TypeScript

PWA

Vue Router & Vuex

ESLint / TSLint / Prettier

用Jest或Mocha进行单元测试

用Cypress 或者 Nightwatch进行E2E 测试

*一开始只有两个选项: default (默认配置)和 Manually select features (手动配置)
默认配置只有 babel 和 eslint 其他的都要自己另外再配置,所以我们选第二项手动配置。

在每次选择手动配置之后,会询问你是否保存配置,也就是图片中的 koro 选项,这样以后我们在进行创建项目的时候 只需使用原先的配置 就可以了,而不用再进行配置。*

Vue CLI 3还附带了一个完整的GUI
可以创建新项目,还可以管理项目中的插件和任务,它不需要Electron,只需用vue ui启动它。

vue.config.js
vue-cli升级到3之后,减少了很多的配置文件,之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、 vue.config.js 中配置,所有的配置项都浓缩到了vue.config.js这个文件中,所以学懂并会用vue.config.js文件很重要。

根据需要在根目录下新建 vue.config.js自行配置,eg:(简单配置,更多配置详情参见官网:https://cli.vuejs.org/zh/config/

module.exports = {
  baseUrl: ‘/‘,// 部署应用时的根路径(默认‘/‘),也可用相对路径(存在使用限制)
  outputDir: ‘dist‘,// 运行时生成的生产环境构建文件的目录(默认‘‘dist‘‘,构建之前会被清除)
  assetsDir: ‘‘,//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认‘‘)
  indexPath: ‘index.html‘,//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {//除了 entry 之外都是可选的
      entry: ‘src/index/main.js‘,// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: ‘public/index.html‘,// 模板来源
      filename: ‘index.html‘,// 在 dist/index.html 的输出
      title: ‘Index Page‘,// 当使用 title 选项时,在 template 中使用:<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: [‘chunk-vendors‘, ‘chunk-common‘, ‘index‘] // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: ‘src/subpage/main.js‘//官方解释:当使用只有入口的字符串格式时,模板会被推导为‘public/subpage.html‘,若找不到就回退到‘public/index.html‘,输出文件名会被推导为‘subpage.html‘
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 环境配置
    host: ‘localhost‘,
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: ‘http://localhost:4000‘ )
      ‘/api‘: {
        target: ‘<url>‘,
        ws: true,
        changeOrigin: true
      },
      ‘/foo‘: {
        target: ‘<other_url>‘
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};

热更新配置

在vue.config.js添加

chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
},
修改css部分热更新还需要注释掉 //extract: true,

css: {
//extract: true,// 是否使用css分离插件 ExtractTextPlugin
sourceMap: false,// 开启 CSS source maps
loaderOptions: {},// css预设器配置项
modules: false// 启用 CSS modules for all css / pre-processor files.
},

css预处理器

主要为css解决浏览器兼容、简化CSS代码 等问题
这样,热更新配置就完成了

创建项目目录时出现的问题
vue create my-app报错:write after endbr/>解决办法。降低了npm的版本到@5.6.0。貌似是之前的npm版本6.1.0有点问题
Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本)

打包出现的问题
在根目录下vue.config.js(如果没有这个文件的话,可以直接在更目录中添加一个,配置参考)文件中进行修改。

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)

[email protected]使用方式和之前版本的差异

原文地址:https://blog.51cto.com/13550695/2463300

时间: 2024-10-07 08:04:45

[email protected]使用方式和之前版本的差异的相关文章

Java解决 [email&#160;protected] SVN空目录

[email protected] SVN方式提交,空目录将出现下述情况 svn: E200015: Empty directories is not supported: {PATH} 解决方案:空目录中添加文件使其满足条件即可 此处使用Java语言编写,其他语言处理方式类似 不多说,直接上代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOExce

Https方式使用[email&#160;protected]设置密码的方式

62561_silentboy Zoker3 years ago member https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credential.helper cache 如果想自己设置时间,可以这样做: git config credential.helper 'cache --timeout=3600' 这样就设置一个小时之后失效 长期存储密码: git

Failed at the [email&#160;protected] preinstall script &#39;./scripts/download&#39; 设置linux proxy (代理)的方式

此问题发生的条件是: 用bitcore官方提供的方式在linux进行npm安装,报错: Downloading bitcoin: https://github.com/bitpay/bitcoin/releases/download/v0.12.1-bitcore-4/npm ERR! Linux 3.16.0-4-686-paenpm ERR! argv "/home/user/.nvm/versions/node/v4.6.0/bin/node" "/home/user/

https 方式使用[email&#160;protected]设置密码的方式

https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credential.helper cache 如果想自己设置失效时间,可以这样做: git config credential.helper 'cache --timeout=3600' 这样就设置一个小时之后失效 长期存储密码: git config --global credential.helper sto

[email&#160;protected]一个高效的配置管理工具--Ansible configure management--翻译(六)

无书面许可请勿转载 高级playbook Finding files with variables All modules can take variables as part of their arguments by dereferencing them with {{ and }} . You can use this to load a particular file based on a variable. For example, you might want to select a

自己的路(GIS之路)---转发至网易博客[email&#160;protected]的博客

当前的GIS教育现状,大家或多或少有所了解.我在<GIS初学者>第一期的<中国GIS本科生学习现状调查报告>一文中进行了简单的调查.阐述与分析.由于有太多的阻力因素存在,教学改革不是一朝一夕就能开展的,因此迷茫的朋友们,还是不要指望学校会给你喂好饭吧.作为一个成年人,应该有自己的思想和意志,走自己的路. 路径选择,首先要知道自己在哪儿,要去哪儿——这是给自己的所在地和目的地定位.所在地的定位没什么问题,能考上大学的人,差不多都对自己的知识和技能.素质和能力.性格和品格有一定的认识,

IDEA 分享项目到 [email&#160;protected]

前提:新开项目,需要在 [email protected] 建立版本库管理. 1.当然是先在[email protected]上创建仓库,拿到[email protected]仓库的HTTP连接 https://git.oschina.net/*****/***.git 2.如果我们的本地项目是非git项目,那我们要先把它变成git项目 在 idea 中 VCS——Import into Version Control——Create Git Repository——选择你的本地项目 3.通过

“makefile”写法详解,一步一步写一个实用的makefile,详解 sed &#39;s,$?\.o[ :]*,\1.o [email&#160;protected] : ,g&#39; &lt; [email&#160;protected]

目的:编写一个实用的makefile,能自动编译当前目录下所有.c/.cpp源文件,支持二者混合编译.并且当某个.c/.cpp..h或依赖的源文件被修改后,仅重编涉及到的源文件,未涉及的不编译. 二要达到这个目的,用到的技术有:1-使用wildcard函数来获得当前目录下所有.c/.cpp文件的列表.2-make的多目标规则.3-make的模式规则.4-用gcc -MM命令得到一个.c/.cpp文件include了哪些文件.5-用sed命令对gcc -MM命令的结果作修改.6-用include命

xcode中 [email&#160;protected] 图片问题

低版本 加载的启动图片为该图片.(320*480) iphone(Portrait) Launch Screen的规格: none Default.png (320 x 480) iPhone 3GS [email protected] (640 x 960)就是iphone4/4s使用的 [email protected] (640x 1136) iphone5/5s [email protected] (750 x 1334) iphone6 [email protected] (1242