Vue项目开发配置

安装不了的时候

npm install --registry=https://registry.npm.taobao.org     //用阿里镜像可以下载成功

-g是全局安装的意思，如果没有-g就会安装到在当前路径下

一、安装nodejs、cnpm和cli

安装Node.js

官网，一直点击下一步即可

安装后就可以在命令行查看到版本了

D:\Program Files\nodejs>node -v
v14.18.1

D:\Program Files\nodejs>npm -v
6.14.15

cmd设置npm安装和缓存路径

npm config set prefix "D:\java\nodejs\node_modules"

npm config set cache "D:\java\nodejs\node_cache"

添加到Path环境变量

一定要设置，不然安装了，但是显示找不到

D:\java\nodejs\node_modules

安装淘宝镜像cnpm

npm install cnpm -g

以后如果cpm安装超时的时候，用cpm方式安装

使用方法：
cnpm install ......

安装vue-cli

如果想使用VUE3，直接执行： npm install -g @vue/cli ，忽略下列所有语句

需要保证vue-cli版本在4.5.0往上才能创建Vue3项目

如果低于 4.5.0 执行 npm install -g @vue/cli 升级版本

//查看 Vue Cli 所有版本号
npm view @vue/cli versions --json    3.x 和 4.x 的所有版本号
npm view vue-cli versions --json   1.x 和 2.x 的所有版本号


npm install vue-cli -g   安装最高版cli

//安装指定版本cli
npm install -g @vue/cli@3    安装3版本最高版
npm install -g @vue/cli@版本号  安装 3.x 和 4.x 版本
npm install -g vue-cli@2.9.6  安装 1.x 和 2.x 版本，比如2.9.6


//卸载Vue Cli
npm uninstall -g @vue/cli   卸载 3.x 或 4.x 版本的Vue Cli
npm uninstall vue-cli -g   卸载 1.x 或 2.x 版本的Vue Cli

安装http-server

全局安装http-server(http-server是一个简单的零配置命令行http服务器)

npm install -g http-server

安装touch

npm install touch-cli -g

安装webpack

npm install webpack -g

安装webpack-cli

npm install webpack-cli -g

查看版本

webpack -v

如果查看版本时报错，依次可以运行下面语句

//首先清除我们已经安装过的版本：
npm uninstall node-sass -g
npm uninstall sass-loader -g
npm uninstall style-loader -g
//清除的时候选择全局的清除和安装，否则下次创建 项目还会有同样的错误 执行重复的操作
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -g
npm install sass-loader@7.3.1 --save-dev -g
npm install style-loader --save-dev -g

二、(非必装)SwaggerEditor，SwaggerUI

SwaggerEditor

SwaggerEditor是个文档编辑器，把yml文件变成html，

下一步文档编写好之后，把dist的所有文件复制到nginx的html文件夹中

（1）下载 https://github.com/swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zip。我在资源中已经提供。

（2）解压swagger-editor,

（4）进入swagger-editor文件夹，启动swagger-editor

http-server

（5）浏览器打开： http://localhost:8080

SwaggerUI

SwaggerUI是用来展示Swagger文档的界面，以下为安装步骤

（1）在本地安装nginx

（2）下载SwaggerUI源码 https://swagger.io/download-swagger-ui/

（3）解压，将dist文件夹下的全部文件拷贝至 nginx的html目录

（4）双击启动nginx

（5）浏览器打开页面 http://localhost即可看到文档页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P19cOIMI-1635603804559)(…/…/%E9%A1%B9%E7%9B%AE/1024%E7%A4%BE%E5%8C%BA/%E5%89%8D%E7%AB%AFmd%E6%96%87%E4%BB%B6/image/2-11-16355971806911.png)]

（6）我们将编写好的yml文件也拷贝至nginx的html目录，这样我们就可以加载我们的swagger文档了

网页是动态的，不用重启！

重启进程

nginx目录输入

nginx -r reload

Windows关闭进程

任意位置输入

taskkill /f /t /im nginx.exe

三、命令行创建项目

创建好项目文件夹

进入目录

F:
cd F:\WebStorm_se\Vue\

在这个目录创建项目

vue init webpack my-first-vue

进入项目下载依赖

cd my-first-vue
npm install

npm install --registry=https://registry.npm.taobao.org     //用阿里镜像可以下载成功

打包并且运行服务器

npm run dev

安装vue-router路由

npm install vue-router --save-dev

安装SASS加载器

用来解析sass文件，不用安装

npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev -g

四、(非必装)ui方式安装

前提是安装了vue-cli

若报错：Cannot find module ‘@vue/cli/lib/util/rcPath

1. D:\java\nodejs\node_modules\node_modules@vue\cli 复制此位置的lib文件夹
2. D:\java\nodejs\node_modules\node_modules@vue\cli\node_modules@vue 先在此创建文件夹cli，然后粘贴到cli内

启动vue ui

vue ui

跟着步骤装好项目

添加element-ui插件

vue-cli-plugin-element

安装依赖

"vue": "^3.2.13",
"vue-router": "^4.0.3"
"core-js": "^3.8.3",    解决IE浏览器不兼容新的api

"axios": "^0.21.4",
"cos-js-sdk-v5": "^1.3.3",   腾讯云图片上传的插件
"echarts": "^5.3.2",     图表
"element-ui": "^2.15.6",  element-plus
"js-cookie": "^2.2.1",  
"moment": "^2.29.1",   格式化日期

"vue-infinite-scroll": "^2.0.2",    无线滚动瀑布流插件
"vue-quill-editor": "^3.0.6",      富文本编辑器
"quill-image-extend-module": "^1.1.2",   是vue-quill-editor的增强模块，用于图片拖拽等功能
"vue-quill-editor-upload": "^1.1.0"    富文本编辑器图片上传功能

五、使用webpack打包

main.js文件

var hello = require("./hello");hello.sayHi();

hello.js文件

//暴露一个方法exports.sayHi = function () {    document.write("<h1>何昱飞</h1>")};

webpack.config.js配置文件，文件名貌似不能改。 必须放在根目录下

module.exports = {    entry:"./modules/main.js",    output:{        filename:"./js/bundle.js"    }}

在终端打包

输入webpack， idea必须以管理员身份运行，不然可能出错

也可以热部署， 输入webpack --watch, 随时自动打包，直接覆盖原文件，Ctrl + c停止

这时候会生成打包好的js文件

最后直接调用