9.03 Day45---搭建Vue开发环境，NPM工具使用，Vue工程创建，启动，打包，部署

1.安装nodejs

 2.需要先熟悉npm工具的使用

配置npm远程镜像仓库 (必须要改, 默认的国外查看太慢)

npm config get registry  查看默认的远程镜像仓库

 

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

配置npm本地仓库 (默认在C盘, 不是一定要改, 但是最好改一下)

npm config get prefix  查看默认的本地仓库路径

npm config get cache  查看默认的本地缓存路径

npm安装命令

npm install modulename -g

npm install modulename -S

npm install modulename -D

npm卸载命令

npm uninstall modulename -g

npm uninstall modulename -S

npm uninstall modulename -D

3.安装vue-cli 脚手架环境 (用于创建vue项目工程的工具)

 

安装/卸载老版本的脚手架 (版本号是2.9.6  已经不更新维护了)

npm install vue-cli -g

npm uninstall vue-cli -g

安装新版本的脚手架    

npm install @vue/cli -g

npm uninstall @vue/cli -g

4.使用vue脚手架工具创建vue工程

创建项目工具不再使用开发工具创建, 改用脚手架工具创建工程

考虑: 工程创建在什么路径下面 (在该目录地址栏输入cmd打开命令行窗口)

vue create 工程名称

 

 

 

删除预设

找到预设的配置文件

C:\用户(Users)\R(当前用户)\.vuerc

 

使用Idea打开项目工程

如果没有这个功能

只能先打开Idea -> File -> Open -> 选中这个工程

项目结构

Idea 安装Vue.js 插件

项目启动

1.必须要在项目的根目录下面执行 “npm run serve” 命令

 

 此时这个命令行窗口被关闭或者 ctrl+c退出运行, 那么项目就不能访问了

访问工程首页

 打包部署

npm run build

打包成功后, 会在项目的根目录下出现一个dist目录 (类比java工程的target目录)

dist - distribute (分布, 发布)

因为这是一个纯前端工程, 里面没有任何与Java有关的代码, 所有部署的时候可以用tomcat

或者nginx，但其实nginx性能会更好

测试一下

准备一台虚拟机，安装nginx

把这个dist目录拷贝到nginx/html/目录中

Nginx: 无法代理JavaWeb工程，只能代理静态资源 / 纯前端工程

Tomcat: 可以代理JavaWeb工程和静态资源

Nginx性能优于Tomcat