vue 3.0和2.0区别_【vue】使用vuecli4.0快速搭建一个项目

一、升级本地环境

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

由于 Node.js v8 已不再维护，我们建议使用 Node.js v10 以上的版本，以保证最佳的兼容性。如果暂时无法升级 Node.js 版本，请使用 npm v6 作为默认的包管理工具。(可以用 npm -v 检查 npm 版本，然后运行 vue config --set packageManager npm 以设置默认包管理工具。)

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli# ORyarn global add @vue/cli# 然后你就可以继续使用vue init了npm init webpack my-project

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

二、搭建项目

快速原型开发

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

安装完成之后，就新建一个文件夹，并创建一个.vue文件，执行下面命令就跑起来了

vue serve app.vue  // 启动服务vue build app.vue  //打包出生产环境的包

如下图，只要创建一个app.vue文件并执行 vue serve app.vue 就启动服务了

这是一个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！

创建项目

初始化：

# 创建项目
vue create my-project // 其中my-project为项目目录名称
复制代码

点击回车后，就不断有拦路记者访问你

此处有两个选择：

• default (babel, eslint) 默认配置 提供babel和eslint支持

• Manually select features 自己手动去选择需要的配置

可以通过上下键，空格来选择，一般会选择手动的配置如下：

对于每一项的功能，做一下简单阐述：

• Babel 主要是对es6语法转换成兼容的js (选上)

• TypeScript 支持使用TypeScript语法来编写代码

• PWA PWA 支持

• Router 支持vue路由配置插件(一般都会选择)

• Vuex 支持vue程序状态管理模式 (一般都会选择)

• CSS Pre-processors 支持css预处理器 (一般都会选择)

• Linter / Formatter 支持代码风格检查和格式化 (选上)

• Unit Testing 单元测试

• E2E Testing E2E测试

那么基于开发常见的项目，一般选择如下：

选择完成后回车：

这的意思是问你本次项目是否采用history模式，如果选择Y,需要后台配置具体看vueRouter官网解释，这里我们选择 n

(选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置)

选择完成后回车：

这里是问你选择一种css预处理，我项目一般使用Sass/SCSS(with dart-sass) ，所以这块我选择第一个。node-sass是自动编译实时的，dart-sass需要保存后才会生效，sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现。回车后：

这里是问你选择一种格式化代码方式，我用VSCode，, 选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，所以一般选择 ESlint + Prettier使用较多。选择回车：

这里问你什么时候进行代码规则检测，Lint on save 保存就检查，Lint and fix on commit   fix 或者 commit 的时候检查，建议第一个。一般会选择保存就检测，也就是Lint on save 选择回车：

这问将Babel,PostCSS,ESLint这些配置文件放哪，通常我们会选择放到独立位置，让package.json文件干净点，所以选择第一个 点击回车：

这里是问你是否记录这次配置选择，选择之后会让你为这次配置起一个名字，这样下次可以直接快速配置选择，最后回车后就会初始化项目了，完成后如下图：

根据提示，我们执行指令 cd my-project 然后执行命令npm run serve 这样就开始启动项目了

这是打开 http://localhost:8080 ：

当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件，它会被@vue/cli-server自动加载，相关配置内容官网将的很详细，可以点击查看

三、环境配置

下面就是关于项目的环境配置了，我这边一般喜欢用 test、preview、production分别表示测试，预览，生产三种环境

修改 package.json 文件如下

"scripts": {    "serve": "vue-cli-service serve",    "test": "vue-cli-service build --mode test",           //测试    "preview": "vue-cli-service build --mode preview",     //预览    "build": "vue-cli-service build --mode production",    //生产    "lint": "vue-cli-service lint"},

在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应

.env.test 代码如下

NODE_ENV="test"VUE_APP_BASE_URL="测试环境域名"

.env.pre 代码如下

NODE_ENV="preview"VUE_APP_BASE_URL="预览环境域名"

.env.prod 代码如下

NODE_ENV="production"VUE_APP_BASE_URL="生产环境域名"

ok，这样环境就配置好了，分别用以下命令来打包不同环境的包就可以了

npm run test    //测试npm run pre     //预发布npm run prod    //生产

另外需要说明一点的是，本地环境会默认从 .env.development 文件中读取配置

所以记得有需要记得新建一个然后存放配置

我的 .env.development 代码如下

NODE_ENV="development"VUE_APP_BASE_URL="本地环境域名"

四、项目配置

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，这里就不分别介绍了，可以 访问官方文档