H5开发环境搭建.txt

开发环境：
1、安装node.js,版本v12.21.0
node -v
v12.21.0

2、安装npm,版本v6.14.11
npm -v
6.14.11

vue脚手架安装
1、安装vue脚手架时，使用工具命令vue init webpack vue1创建vue项目
①从github仓库中下载vue-templates/webpack，然后解压到本地
下载地址：https://github.com/vuejs-templates/webpack
②下载完成之后，将压缩包解压到用户目录下，需要更改用户目录下的目录为.vue-templates，注意文件夹名称前面的点( . )，文件名为webpack。
修改完成后，我们再进行vue init webpack vue1命令时，需要注意后面的 –offline（表示离线化)

命令： vue init webpack 项目名 -offline
执行命令之后，显示：Project initialization finished!表示安装成功。

2、项目创建成功后，通过命令启动
①cd vue1 切换目录至项目目录
②npm run dev 运行启动
③在浏览器中使用localhost:8080则可以访问，表示vue脚手架安装完成了。

3、vue 前端项目编译
①cd 项目路径
②rm node_modules/ -rf
③cpm install 这里使用cnpm代替npm下载依赖包
npm install

1、index.html-主页，项目入口；
2、App.vue-根组件；
3、main.js-入口文件
4、index.js 设置路由–名字和资源映射起来，渲染到App.vue
在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

---------------------------------------------------------------------------------------------------
前端程序：.....\nthmfms\04code\ntapp
后端程序：.....\nthmfms\04code\ntapp-admin

配置端口：
前端端口：
/项目目录/config/index.js文件中配置

调用后端服务地址：
/项目目录/src/assets/js/request.js文件中配置baseURL

1、进入项目目录
cd 项目路径

2、编译项目

npm install

# -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install -save moduleName

# -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
npm install -save-dev moduleName

3、开发环境启动前端程序
npm run dev

4、生产环境启动前端程序
npm run build

5、安装vant前端组件依赖
npm i vant

6、使用 npm安装vconsole
npm install vconsole -S

F:\WORKSPACE\SVN\WXZJ\nthmfms\04code\ntapp

---查看windows端口占用
netstat -ano