VUE项目环境搭建

水深无声 2023-07-24 14:40 24阅读 0赞

1.下载node.js([http://nodejs.cn][http_nodejs.cn])

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70][]

2.安装node.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 1][]

3.查看node.js安装版本，命令行下执行;node -v

![20200412153737280.png][]

4.设置node.js缓存和全局信息存放路径

4.1安装目录下面新建node\_global和node\_cache文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 2][]

4.2node中配置信息路径

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

![20200412154727788.png][]

5.基于 Node.js 安装cnpm（淘宝镜像） ps:cnpm和npm一样使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

![20200412154842928.png][]

6.配置环境变量

PATH        D:\tools\nodejs\node_global;
    NODE_PATH   D:\tools\nodejs\node_modules

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 4][]

7.安装vue

cnpm install vue -g

![20200412155640982.png][]

8.安装vue命令行工具，即vue-cli 脚手架

cnpm install vue-cli -g

![20200412155823351.png][]![20200412155839814.png][]

\*\*\*\*\*\*\*\*\*\*\*\*\*\*node.js以及vue环境搭建完成，开始搭建 vue demo 工程\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

9.创建vue项目，进入代码存放目录，并打开命令行，执行vue工程初始化(有点耗时)

vue init webpack vuedemo

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 6][]

10.进行vue工程目录，运行vue

npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 7][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 8][]

\*\*\*\*\*\*\*\*\*\*\*\* vue 环境搭建完成，开始添加一个页面进行http请求\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

11.使用Hbuilder工具导入 vue 工程代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 9][]

12 vue 框架设置http请求第三方模块（package.json）

"axios": "^0.19.0"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 10][]

13vue 框架引入http依赖（main.js）

//添加http请求
    import axios from 'axios';
    Vue.prototype.$axios = axios;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 11][]

14.添加http请求处理公用方法（http.js）

import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.timeout = 5000; //响应时间
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头
    axios.defaults.baseURL = ''; //配置接口地址
    
    //POST传参序列化(添加请求拦截器)
    axios.interceptors.request.use((config) => {
      //在发送请求之前做某件事
      if (config.method === 'post') {
        // config.data = qs.stringify(config.data);
      }
      return config;
    }, (error) => {
      console.log('错误的传参')
      return Promise.reject(error);
    });
    
    //返回状态判断(添加响应拦截器)
    axios.interceptors.response.use((res) => {
      //对响应数据做些事
      if (!res.data.success) {
        return Promise.resolve(res);
      }
      return res;
    }, (error) => {
      console.log('网络异常')
      return Promise.reject(error);
    });
    
    //返回一个Promise(发送post请求)
    export function post(url, params, datas) {
      return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            params: params,
            data: datas
          })
          .then(response => {
            resolve(response.data);
          }, err => {
            reject(err);
          })
          .catch((error) => {
            reject(error)
          })
      })
    }
    
    返回一个Promise(发送get请求)
    export function fetchGet(url, param) {
      return new Promise((resolve, reject) => {
        axios.get(url, {
            params: param
          })
          .then(response => {
            resolve(response)
          }, err => {
            reject(err)
          })
          .catch((error) => {
            reject(error)
          })
      })
    }
    export default {
      post,
      fetchGet,
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 12][]

15.添加自定义vue组件(MyVue.vue)

<template>
      <div>
        <span>MY VUE</span>
        <button v-on:click="queryInfo()">查询数据</button>
      </div>
    </template>
    <script>
      import http from '../http.js'
      export default {
        //页面初始化方法
        mounted() {
        },
        methods: {
          queryInfo() {
            var params = {
              "id": 1
            }
            http.fetchGet('/testController/get.action?id=1', params).then((response) => {
              alert("id : " + response.data.id + ", content : " + response.data.content);
            }).catch(err => {
              console.log(err)
            })
          }
        },
        data() {
          return {}
        }
      }
    </script>
    <style>
    
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 13][]

16.引入自定义组件（index.js）

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import MyVue from '@/components/MyVue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
            path: '/MyVue',
            name: 'MyVue',
            component: MyVue,
            children: []
        }
      ]
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 14][]

17.设置http请求代理（index.js）

//设置跨域信息
        proxyTable: {
          '/': {
            target: 'http://127.0.0.1:8082',
            changeOrigin: true,
            pathRewrite: {}
          }
    
        },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 15][]

18.vue工程进行第三包下载

npm install

![20200412200740437.png][]

19.重启服务 npm run dev，浏览器输入：[http://localhost:8080/\#/MyVue][http_localhost_8080_MyVue]，并点击“查询数据”按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 16][]

命令

node -v     // 查看安装node版本
    vue -V      // 查看vue版本
    where node  // 查看node的安装路径
    npm run build // vue 打包
    npm install  // 初始化vue工程

[http_nodejs.cn]: http://nodejs.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70]: /images/20230528/7272e8b0b5304c208f526d23beffbc9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 1]: /images/20230528/ce3e366106a847ba8d7ae10e69debe74.png
[20200412153737280.png]: /images/20230528/94e519f0a61c437ea9194a6657332604.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 2]: /images/20230528/a315f756c0bb4126807b2953a1b70768.png
[20200412154727788.png]: /images/20230528/0280e05a7f80453793796ea1307f26fe.png
[20200412154842928.png]: /images/20230528/64e925fe7df14d93936bdc3532901de8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200412155138975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 4]: /images/20230528/769828c68a224c4489c3bc1d1cc94642.png
[20200412155640982.png]: /images/20230528/488cac2e4e9045d987e2b095c526208d.png
[20200412155823351.png]: https://img-blog.csdnimg.cn/20200412155823351.png
[20200412155839814.png]: /images/20230528/36430e15febc48e7aada304a987254f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 5]: /images/20230528/3b7c0cc86b4d40a6b179c0d1a89da3b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 6]: /images/20230528/710e515cf71749f695c25baf7ae58f40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200412162626401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 8]: /images/20230528/6179ec7b22fc4d34a02df46a73ffbcd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 9]: /images/20230528/d65e580df27e4e74963fdb182aaca3a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 10]: /images/20230528/4c584772d71d4dc384d3dca3f93a1acf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 11]: /images/20230528/ef663714a82044ca97557510762ab856.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 12]: /images/20230528/66f54caf96b642cdbf9c9aa4703b9028.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 13]: /images/20230528/9c3680340e5c447c9fa83e1fba66c5f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 14]: /images/20230528/0c34e7d054b74c24ae510174b0c85273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 15]: /images/20230528/11c565f821b14dcba13bf8c58fd42d9a.png
[20200412200740437.png]: /images/20230528/861b66e7540e45a596da9362f5a58fb3.png
[http_localhost_8080_MyVue]: http://localhost:8080/#/MyVue
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MTU0MDc3_size_16_color_FFFFFF_t_70 16]: /images/20230528/d66b660267cd4ecd9d80cf4af70e2255.png