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 所有的配置了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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-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 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
-
深入理解Vue-cli搭建项目后的目录结构探秘
我最近也在研究Vue-cli的路上,今天了解一下Vue-cli目录结构,那么今天也算个学习笔记吧! 一.前言 这里先说一下使用vue-cli之前的事情. 由于刚刚接触Vue不久,就接到了一个移动端项目,于是打算使用vue来进行一次尝试,所以按照练习时候的样子,emmm先把vue.js引入网页里来,emmm自己的外联main.css样式引进来,还有自己的main.js文件,还有一些图片布拉布拉的,所以我整个项目的结构如下:(捂脸) ├── css ├── images ├── index.html
-
vue2.0实战之使用vue-cli搭建项目(2)
Vue-cli是官方推荐的快速构建单页应用的脚手架.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.npm.nodejs等等,很容易成就从入门到放弃的思想.这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议).一下是构建过程. 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入node -v和npm -v,如果能显示出
-
详解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脚手架)快速搭建项目的方法
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭
-
基于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-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实现项目登陆页面流程详解
目录 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
随机推荐
- Windows2008快速创建新用户方法
- 详解CentOS7防火墙管理firewalld
- 高仿Windows Phone QQ登录界面实例代码
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- smarty简单分页的实现方法
- PHP JSON格式数据交互实例代码详解
- Python函数中*args和**kwargs来传递变长参数的用法
- vc中float与DWORD的互想转换实现代码
- android自定义控件创建翻页接口详细代码
- 深入分析Mysql中limit的用法
- docker容器跨服务器的迁移的方法
- jquery无缝向上滚动实现代码
- WIN2000+PHP+MYSQL+TOMCAT+JSP完全整合安装手册
- JQuery 确定css方框模型(盒模型Box Model)
- 解析从源码分析常见的基于Array的数据结构动态扩容机制的详解
- Bootstrap 实现表格样式、表单布局的实例代码
- 易语言的优势总结
- 部署前后端分离式nginx配置的完整步骤
- Java使用OpenCV3.2实现视频读取与播放
- Springboot RestTemplate 简单使用解析