一、Vue cli 3 版本的和Vue cli 2 版本的区别。
一、安装上区别:
1.Vue cli 2 版本安装命令 :
npm install -g vue-cli
2.Vue cli 3 版本安装命令:
npm install -g @vue/cli
二、创建项目区别
1.Vue cli 2 版本创建项目命令 :
vue init webpack project
2.Vue cli 3 版本创建项目命令 :
vue create project
三. 运行项目区别
1.Vue cli 2 版本运行项目命令 :
npm run dev
2.Vue cli 3 版本运行项目命令 :
npm run serve
四. 项目打包命令一致
1. 打包编译项目命令:
npm run build
2. 打包后部署
执行打包命令:npm run build
成功之后会在项目路径生成名为dist
的文件夹,把dist 复制到nginx 的html目录下
,启动nginx
即可
可能出现的问题就是你访问的时候会出现一个空白的页面,那是因为样式没有找到报404
解决方案:
修改项目路径下的conf/index.js
文件
修改module.exports={dev:{},build:{}}
中的 build
把 assetsPublicPath
属性从’/‘
改为‘./‘
然后重新打包即可
注意上面的步骤,是修改build中
的assetsPublicPath
,不是dev
中的,别改错了地方
五. 官方对Vue-Cli3介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,也成为脚手架,提供:
1. 通过 @vue/cli 搭建交互式的项目脚手架。
2. 通过 @vue/cli + @vue/cli-service-global快速开始零配置原型开发。
3. 一个运行时依赖 (@vue/cli-service),该依赖:
①. 可升级;
②. 基于 webpack 构建,并带有合理的默认配置;
③. 可以通过项目内的配置文件进行配置;
④. 可以通过插件进行扩展。
4. 一个丰富的官方插件集合,集成了前端生态中最好的工具。
5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject
六、安装
1. 对于已经安装了旧版Vue CLI
的包名称由 vue-cli
改成了 @vue/cli
。 如果你已经全局安装了旧版本
的 vue-cli
(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g
或 yarn global remove vue-cli
卸载它。
命令如下:
卸载以前装的vue-cli
npm uninstall -g vue-cli
安装vue/clinpm install -g @vue/cli
或者yarn global add @vue/cli
2. Node 版本要求Vue CLI
需要 Node.js 8.9
或更高版本 (推荐 8.11.0+)。你可以使用 nvm
或 nvm-windows
在同一台电脑中管理多个Node
版本。
3. 安装命令
第一步:
npm install cnpm -g --registry=https://registry.npm.taobao.org
第二步:npm install -g @vue/cli
上述命令也可以使用国内的淘宝镜像安装:cnpm install -g @vue/cli
4.创建项目
vue-app
表示项目名
命令:vue create vue-app
上面命令vue create的可选项:
用法: create [options]
创建一个由 vue-cli-service
提供支持的新项目
选项:-p, --preset <presetName>
: 忽略提示符并使用已保存的或远程的预设选项-d, --default
: 忽略提示符并使用默认预设选项-i, --inlinePreset <json>
: 忽略提示符并使用内联的 JSON 字符串预设选项-m, --packageManager <command>
在安装依赖时使用指定的 npm 客户端-r, --registry <url>
: 在安装依赖时使用指定的 npm registry-g, --git [message]
: 强制 / 跳过 git 初始化,并可选的指定初始化提交信息-n, --no-git
: 跳过 git 初始化-f, --force
: 覆写目标目录可能存在的配置-c, --clone
: 使用 git clone 获取远程预设选项-x, --proxy
: 使用指定的代理创建项目-b, --bare
: 创建项目时省略默认组件中的新手指导信息-h, --help
: 输出使用帮助信息
5. 使用图形化界面创建项目
vue ui