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 如下:

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

现在仿照添加 vue,vue 在我的安装目录下的 node_global:

《VUE-CLI3.x 脚手架,前后端分离(1)》

添加到 path:

《VUE-CLI3.x 脚手架,前后端分离(1)》

重新打开命令行,查看 vue 版本:

《VUE-CLI3.x 脚手架,前后端分离(1)》

HELLO WORLD

使用命令行创建

1 新建一个 workspace 文件夹,按住 shift 右键,在此处打开命令行或 power shell,输入如下命令创建项目:

vue create helloworld

《VUE-CLI3.x 脚手架,前后端分离(1)》

2 上下选择,回车确定,后续创建完项目也可以继续添加依赖配置,这里选择第一个 default,开始创建下载依赖

《VUE-CLI3.x 脚手架,前后端分离(1)》

3 创建成功后会提示,成功创建项目 helloworld,输入如下命令启动项目:

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

测试成功!

使用 UI 界面创建

1 打开 workspace 文件夹,在此处打开命令行,输入如下命令:

vue ui

会自动打开浏览器,项目管理界面,会有之前命令行创建的项目 helloworld:

《VUE-CLI3.x 脚手架,前后端分离(1)》

可以看到之前命令行创建的 helloworld

《VUE-CLI3.x 脚手架,前后端分离(1)》

2 创建新项目

《VUE-CLI3.x 脚手架,前后端分离(1)》

3 选择预设并创建

《VUE-CLI3.x 脚手架,前后端分离(1)》

《VUE-CLI3.x 脚手架,前后端分离(1)》

《VUE-CLI3.x 脚手架,前后端分离(1)》

左侧可以管理项目的插件、依赖、配置,任务里面可以管理项目的运行和停止:

《VUE-CLI3.x 脚手架,前后端分离(1)》

《VUE-CLI3.x 脚手架,前后端分离(1)》

《VUE-CLI3.x 脚手架,前后端分离(1)》

UI 界面创建的项目,可以在 UI 管理界面的首页项目中看到,命令行创建的是看不到的。

目录结构

《VUE-CLI3.x 脚手架,前后端分离(1)》

打包试试:

npm run build

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

是可以访问的。

目录结构

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

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

vue.config.js 配置

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

《VUE-CLI3.x 脚手架,前后端分离(1)》

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

    原文作者:贝哥哥
    原文地址: https://segmentfault.com/a/1190000019616983
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞