10分钟上手vue-cli 3.0 入门介绍

《Vue-cli 3.0入门指南：长沙网络推广心得分享》

一、环境安装篇

全新版本的Vue脚手架已经亮相，它的极高。只需通过npm或yarn安装@vue/cli，你便能在全局环境中轻松使用它。具体操作命令如下：

npm install -g @vue/cli

yarn add global @vue/cli

二、项目创建篇

相较于之前的2.X版本，Vue-cli 3.0将插件和模板移植到了命令行界面，使得创建项目更为便捷。旧版需要通过特定的命令和模板来创建项目，而新版只需执行vue create 即可。操作过程中会有几个默认配好的模板供我们选择，如Manually select features等。值得注意的是，Vue-cli 3.0还提供了保存当前配置的功能，便于下次直接使用。

三、配置项目插件和功能篇

在配置项目插件和功能环节，我们可根据需求选择相应的插件，如TypeScript、PWA、Vue-router、Vuex等。我们还可以选择CSS预处理、eslint prettier以及自动化测试的单元测试和e2e等实用工具。在这个环节，我们还可以根据个人喜好选择配置文件存放方式，如独立放置或放在package.json文件中。完成配置后，等待安装完成即可。

四、启动项目篇

安装完成后，进入项目目录并启动项目。Vue-cli 3.x默认会自动打开浏览器，并将地址显示在控制台。启动后的界面与之前的版本类似，按照步骤正常操作即可。具体操作命令为：yarn serve 或 npm run serve。至此，你已经成功上手了vue-cli 3.0，可以开始你的Vue开发之旅了。

以上就是长沙网络推广分享的vue-cli 3.0入门介绍，希望对你有所启发和帮助。跟随长沙网络推广的引导，让我们一起Vue的世界吧！项目与配置指南——以vue-cli 3.x为例

概览

让我们来看一下整体的目录结构。相较于之前的版本，vue-cli 3.x的目录结构更加简洁清晰。那些繁琐的build和config等目录已被移除，大部分配置都集中到了vue.config.js文件中。这使得项目结构更加清晰，方便开发者快速定位并修改配置。

一、服务器配置随心所欲

1. 端口修改：只需在vue.config.js中进行简单的配置，然后重新启动工程，就可以轻松修改服务器端口。例如，将端口修改为5999。

```javascript

module.exports = {

lintOnSave: false,

devServer: {

port: 5999

}

}

```

2. 常用webpack配置修改：webpack的配置可以在configureWebpack属性中进行修改，包括plugins的扩展。虽然vue-cli已经封装了常用的配置，但如果有特殊需求，开发者可以自行扩展。例如，修改webpack的devtool输出方式，以便更好地跟踪代码。

```javascript

configureWebpack: config => {

if (process.env.NODE_ENV === 'development') {

config.devtool = 'source-map';

}

}

```

二、全局变量的设置

在项目根目录创建两个文件：.env.development和.env.production，在里面配置键值对，就可以设置全局变量。需要注意的是，这些变量必须以VUE_APP开头。例如，设置模拟数据的根路径，在axios中就可以使用这个路径。

```bash

VUE_APP_MOCK_URL = '

```