VUE-CLI3.x 脚手架，先后端分离(1)

前言

编辑的时间比较早，理解的不是很准确，适合了解vue有这么回事，具体还须要本身看扒拉官方文档各类百度 ^_^。

安装

安装 nodejs

从官网下载，这里下载当前最新版，运行安装，选择接受，一路 next 最后 finish。

做用：nodejs 安装时会自动安装 npm，自动添加到 path 路径，能够这样对比

• nodejs -> tomcat
• npm -> maven

就是 nodejs 运行的是 javascript。

打开 cmd，执行命令

node -v

显示当前 nodejs 版本号，安装成功。

安装开发工具

以前用 atom，如今用 vscode，选哪个：

• atom 比 vscode 好看一些
• vscode 打开的控制台好用

说的不全面，我如今更喜欢 vscode。

安装 VUE-CLI

先切换一下 npm 镜像，提升 npm 下载依赖包的速度，临时改变：

npm --registry https://registry.npm.taobao.org install express

永久改变：

npm config set registry https://registry.npm.taobao.org

获取当前 npm 资源库的位置，若是是刚才设置的 url，表示设置成功：

npm config get registry

VUE-CLI 的 1.x,2.x 和 3.x 安装命令不同，全局安装过 1.x,2.x 的须要先卸载，以 VUE-CLI 的官方文档为准，下面命令都在 cmd 命令行执行，注释内容不要粘贴（命令行中，左键未选中内容时，右键是粘贴，左键选中内容时，右键是复制）。
3.x 之前包名是 vue-cli ，3.x 是 @vue/cli 。

卸载：

npm uninstall vue-cli -g  //-g 表示全局的意思，
# 或者
yarn global remove vue-cli

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

不知道是我以前修改过配置的缘由仍是如今这个版本默认就是这样，个人 npm 全局安装的包都在安装目录的 node_global 下面，这样 我刚才安装的 vue 就在这个目录下，
执行下面命令，查询当前 vue 的版本号，是否是3.x：

vue --version

若是提示你，不是内部或外部命令，这是由于 vue 没有在 path 环境中配置，在安装 nodejs 的时候自动安装了 npm 包，npm 也自动加入了 path 环境，能够仿照添加 vue，在环境变量中个人 npm 以下：

打开路径是包含 cmd 的路径：

如今仿照添加 vue，vue 在个人安装目录下的 node_global：

添加到 path：

从新打开命令行，查看 vue 版本：

HELLO WORLD

使用命令行建立

1 新建一个 workspace 文件夹，按住 shift 右键，在此处打开命令行或 power shell，输入以下命令建立项目：

vue create helloworld

2 上下选择，回车肯定，后续建立完项目也能够继续添加依赖配置，这里选择第一个 default，开始建立下载依赖

3 建立成功后会提示，成功建立项目 helloworld，输入以下命令启动项目：

依次执行提示命令运行，左键选择命令，右键复制，右键粘贴，回车

4 运行成功，提示项目访问的 URL 和打包成上线产品的命令：

5 访问测试： http://localhost:8081/

测试成功！

使用 UI 界面建立

1 打开 workspace 文件夹，在此处打开命令行，输入以下命令：

vue ui

会自动打开浏览器，项目管理界面，会有以前命令行建立的项目 helloworld：

能够看到以前命令行建立的 helloworld

2 建立新项目

3 选择预设并建立

左侧能够管理项目的插件、依赖、配置，任务里面能够管理项目的运行和中止：

UI 界面建立的项目，能够在 UI 管理界面的首页项目中看到，命令行建立的是看不到的。

目录结构

打包试试：

npm run build

会将项目打包到项目路径下的 dist 文件夹中，直接打开 index 是访问不了的：

把 dist 里面的文件都丢到 tomcat 的 ROOT app里面试试：

是能够访问的。

目录结构

helloworld
    |—— node_modules #依赖的包
    |—— public 
    |    |—— favicon.ico 
    |    |—— index.html 
    |
    |—— src 程序员开发编辑的目录
    |—— 。。。

打开 vscode 开发工具，用开发工具打开项目，会自动识别为 VUE 语言，而后提示安装 VUE 开发插件，安装就行。

vue.config.js 配置

参考 官方文档 中，这是一个可选配置，与 package.json 同级，也能够将 vue.config.js 配置内容写在 package.json 里面，键为 vue,

baseUrl 是项目根路径，打包，在 tomcat 的 webapp 里面新建 vue 文件夹，把打包的 dist 里面的内容丢到 vue 文件夹，访问测试