vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

vue-cli 3.0 正式版于 8月10号发布，但是3.0 与 2.0 版本在搭建项目时到底有何不同呢？下面做一下简单的介绍，希望可以帮到有需要的朋友

1、 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本，先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后，有以下两种创建项目的方式：

a 、 指令： vue create < project-name> ;然后会出现默认和手动两个选项，跟着步骤走就好；下面选择手动

等等

b、用视图创建项目  vue  ui

然后点击创建跟着步骤走就好；

如果：你个人还是很想用之前的创建项目的方式 ，那你则需要安装 （npm install -g @vue/cli-init） 这样就可以像之前一样创建项目  eg:   vue init webpack vue-program

2、用vue-cli3.0版本创建的项目与2.0版本相比较，我们会发现，文件目录少了很多 eg：build、config，那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等，到哪里配置呢？？vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件，之前繁琐的配置都可以在这里直接配置。

官方是这样说的。vue.config.js 是一个可选的配置文件，如果项目的（和package.json 平级）根目录中存在这样一个文件，那么他会被 @vue/cli-service 自动加载，（并覆盖其内部的配置）

下面我们就看一下vue.config.js 里的相关配置

更多的相关配置，可参考官网  https://cli.vuejs.org/zh/config/#vue-config-js

3、相关配置配好了，但是在打包时，如何配置（测试、预发、生产）环境呢？

这是我们只需要在根目录下创建 后缀名为.env（.env.prod  / .env.pre  /  .env.test）的文件，将你需要的环境配进去就可以了  eg:

这里需要注意一点：由于我们再打包时，不需动NODE_ENV，所以这里面我们可以直接用production ,(如果改了，你打包出来的项目会发现会少很多)，如果不想用，那你则需要去底层进行修改相应的配置。

4、最后指出配置好环境以后，我们需要在package.json里面配置相应的指令；

“buildTest” ：“vue-cli-service build --mode test”,

"buildPre" ： "vue-cli-service build --mode pre"

"build" : "vue-cli-service build --mode prod"

// 打包，会把process.env.NODE_ENV设置为步骤4中‘.env.alpha'文件设置的值。

// 注意，这里 “--mode 名字“ 要和步骤2中文件名“.env.名字”名字保持一致

如果你还想在同一项目打不同的生产包，也只需在.env文件里面加上相应的配置，但是与vue-cli 2.0 比较，你需要建多个.env文件，来控制的包 eg:

这样我们基本上就用vue-cli 3 完成了vue-cli 2 所有的配置了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入理解Vue-cli搭建项目后的目录结构探秘

    我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html

  • 使用vue-cli webpack 快速搭建项目的代码

    使用vue-cli webpack 快速搭建项目的代码

    一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于webpack模板的项目 vue init webpack [demoname] ? Project name (xxx) ? Project name xxxx ? Project description (A Vue.js project) ? Project description A Vue.js

  • vue2.0实战之使用vue-cli搭建项目（2）

    vue2.0实战之使用vue-cli搭建项目（2）

    Vue-cli是官方推荐的快速构建单页应用的脚手架.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.npm.nodejs等等,很容易成就从入门到放弃的思想.这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议).一下是构建过程. 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入node -v和npm -v,如果能显示出

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • 详解Vue使用 vue-cli 搭建项目

    详解Vue使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功.  二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-

  • 基于Vue-cli快速搭建项目的完整步骤

    基于Vue-cli快速搭建项目的完整步骤

    前言 vue-cli 是一个官方发布 vue.js 项目脚手架,Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架.下面我说一下vue-cli的使用方法. 下面话不多说了,来一起看看详细的介绍吧 一.准备工作 在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli 1.nodejs和npm安装方法详见:https://www.jb51.net/article/90518.htm 2.npm install -g vue 3.npm in

  • vue-cli3搭建项目的详细步骤

    中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友 1. 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式: a . 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • 安装mysql8.0.11及修改root密码、连接navicat for mysql的思路详解

    1.1. 下载: 官网下载zip包,我下载的是64位的: 下载地址:https://dev.mysql.com/downloads/mysql/ 下载zip的包: 下载后解压:(解压在哪个盘都可以的) 我放在了这里 E:\web\mysql-8.0.11-winx64 ,顺便缩短了文件名,所以为 E:\web\mysql-8.0.11. 1.3. 生成data文件: 以管理员身份运行cmd 程序--输入cmd 找到cmd.exe 右键以管理员身份运行 进入E:\web\mysql-8.0.11\

  • python_array[0][0]与array[0,0]的区别详解

    在学习python的时候, 看到有些 代码中使用array[0][0] 来提取位置元素 不太明白. 动手实验了一下 import numpy as np a = np.array([np.arange(12),np.arange(12,24)]) >>>print a [[ 0 1 2 3 4 5 6 7 8 9 10 11] [12 13 14 15 16 17 18 19 20 21 22 23]] >>>print a[0][6] 6 [0][6] means:

  • C语言中指针 int *p=0;和int *p;*p=0;和”&“的关系和区别详解

    初学者在学习C语言的时候,最头疼的可能就是指针,话不多说.让我们直接进入正题 直接上代码 int main(void) { int *p = 0; printf("%d", *p); system("pause"); return 0; } 直接运行,好了,程序是不是报错了?那就对了.因为此时的int *p=0实际等于int *p; p=0; 让我们来验证一下对不对 int main(void) { int *p = 0; printf("%d"

  • 深度学习中shape[0]、shape[1]、shape[2]的区别详解

    深度学习中shape[0].shape[1].shape[2]的区别详解对于图像来说: img.shape[0]:图像的垂直尺寸(高度) img.shape[1]:图像的水平尺寸(宽度) img.shape[2]:图像的通道数 举例来说,下面是一张300X534X3的图像,我们用代码,进行验证. 代码如下: import matplotlib.image as mpimg # mpimg 用于读取图片 if __name__ == '__main__': img = mpimg.imread('

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • Vue完整版和runtime版的区别详解

    目录 创建Vue实例的三种方式 从HTML得到视图 用JS构建视图 使用vue-loader 两者对比 最佳实践 SEO友好 创建Vue实例的三种方式 从HTML得到视图 前提:使用完整版,CDN引入或者修改配置 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... configureWebpack: { resolve: { alias: { vue$: 'vue/

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

随机推荐