美文网首页
使用Vue-cli 3.0搭建vue项目

使用Vue-cli 3.0搭建vue项目

作者: 张张张张张小囡 | 来源:发表于2019-06-10 09:35 被阅读0次

    1、首先查看本地nodejs和npm的版本:

      node -v,
      npm -v
    

    2、安装更新:

      npm install -g node
      npm install -g npm
    

    3、安装vue cli 3.0

      npm install -g@vue/cli
    

    4、cd到文件夹下

      cd /Volumes/work
    

    5、创建项目

      vue create vue-test  
      ‘vue-test’是项目名字,接下来选择预设,推荐第二种
    

    6、启动项目

       npm run serve
    

    7、创建vue.config.js

    如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

    module.exports = {
        devServer: {
        // host: 'localhost',
        // port: 8080,
        https: false,
        hotOnly: true,
        disableHostCheck: true,
        // baseUrl: '/',
        proxy: {
            '/resourceApi': {
                target: 'http://127.0.0.1:8082',
                ws: true,// 如果要代理 websockets
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                // autoRewrite: true,
                // cookieDomainRewrite: true,
                pathRewrite: {
                    '^/resourceApi': ''
                }
            }
        },
        before: app => { }
      },
      configureWebpack: {
          performance: {
              hints: false
          }
      },
      css: {
          loaderOptions: {
          // 给 sass-loader 传递选项
              sass: {
                  // @/ 是 src/ 的别名
                  // 所以这里假设你有 `src/variables.scss` 这个文件
                  // data: `@import "@/variables.scss";`
              }
          }
      }
    }

    相关文章

      网友评论

          本文标题:使用Vue-cli 3.0搭建vue项目

          本文链接:https://www.haomeiwen.com/subject/iegvzqtx.html