friendship-front

Vue前端项目

开发介绍

页面放在 src/views/ 目录下。 访问后端的接口定义放在 api 目录下

开始开发使用

说明： 本开发环境用上了 node-sass 组件, 此组件依赖 Python，有报异常时需要安装 Python 环境。

# 安装依赖
npm install

# 启动服务 
npm run dev    #浏览器自动打开访问 http://localhost:9527

# 构建生产环境
# 如果有必要，需要对 config/prod.env.js 的属性BASE_API做更改，改为生产环境对应的ip地址和端口！
npm run build:prod

前端开发环境搭建

1. 下载Node.js v10.16.3 LTS，并安装（D:\Program Files\nodejs） 打开cmd界面，输入命令： npm -v 检查是否安装 成功(输出 6.9.0)。

2. 改变npm原有的环境变量(Windows) （上步已经安装好了npm）

   • 配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在NodeJS的主目录下, 可先新建好这两文件夹。

     进入CMD命令窗口：

     npm config set prefix "D:\Program Files\nodejs\node_global"
     npm config set cache "D:\Program Files\nodejs\node_cache"
     

   • 将改动的 node_global 增加到环境变量

     NODE_PATH = D:\Program Files\nodejs\node_global
     在PATH环境变量加上 %NODE_PATH%
     

   • 设置镜像

     npm config set registry https://registry.npm.taobao.org --global
     npm config set disturl https://npm.taobao.org/dist --global              // 这步可以不需要。
     

2. 安装 vue

npm i vue -g
        运行输出：
        + vue@2.6.10
        added 1 package from 1 contributor in 0.508s

npm i vue-cli -g
        运行输出：
        npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
        D:\Program Files\nodejs\node_global\vue -> D:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue
        D:\Program Files\nodejs\node_global\vue-list -> D:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-list
        D:\Program Files\nodejs\node_global\vue-init -> D:\Program Files\nodejs\node_global\node_modules\vue-cli\bin\vue-init
        + vue-cli@2.9.6
        added 241 packages from 206 contributors in 10.865s

npm i @vue/cli -g
       安装 @vue/cli  （https://cli.vuejs.org/zh/guide/)

       运行输出：
       + @vue/cli@3.12.0
       added 841 packages from 556 contributors in 39.617s