乐趣区

VUECLI3x-脚手架前后端分离1

jiezi

前言

编辑的时间比较早，理解的不是很准确，适合了解 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 文件夹，访问测试

退出移动版