开始玩Vue

1. 安装nodejs

参考教程https://www.runoob.com/nodejs/nodejs-install-setup.html

2. 安装npm

参考教程https://www.runoob.com/nodejs/nodejs-npm.html

3. Vue的安装以及创建第一个项目:

参考教程https://www.runoob.com/vue2/vue-install.html

4. 安装easyUI for Vue:

注意,easyUI应该安装在你的项目下进行安装,否则会有下面的错误信息:

D:\MyDev\vue\test01>npm install vx-easyui --save
npm WARN saveError ENOENT: no such file or directory, open 'D:\MyDev\vue\test01\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\MyDev\vue\test01\package.json'
npm WARN test01 No description
npm WARN test01 No repository field.
npm WARN test01 No README data
npm WARN test01 No license field.

+ vx-easyui@1.2.8
added 1 package from 1 contributor, removed 1 package and audited 2 packages in 5.198s
found 0 vulnerabilities

正常的提示应该是酱紫的,前面都是勾勾:

D:\MyDev\vue\test01>cd my-project

D:\MyDev\vue\test01\my-project>cnpm install vx-easyui --save
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
Recently updated (since 2020-05-13): 1 packages (detail see file D:\MyDev\vue\test01\my-project\node_modules\.recently_updates.txt)
√ All packages installed (1 packages installed from npm registry, used 2s(network 2s), speed 243.66kB/s, json 1(3.66kB), tarball 447.85kB)

5. 发布到Tomcat:

参考教程https://blog.csdn.net/ytangdigl/article/details/78977687

在你的项目文件夹运行如下命令:

D:\MyDev\vue\test01\my-project>npm run build

> vue01@1.0.0 build D:\MyDev\vue\test01\my-project
> node build/build.js

Hash: 83c40412cb1bbeb248a8
Version: webpack 3.12.0
Time: 14935ms
                                                  Asset       Size  Chunks             Chunk Names
               static/js/vendor.b3165cbad88a3daffd2d.js     122 kB       0  [emitted]  vendor
                  static/js/app.b22ce679862c47a75225.js    11.6 kB       1  [emitted]  app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]  manifest
    static/css/app.30790115300ab27614ce176899523b62.css  432 bytes       1  [emitted]  app
static/css/app.30790115300ab27614ce176899523b62.css.map  797 bytes          [emitted]
           static/js/vendor.b3165cbad88a3daffd2d.js.map     614 kB       0  [emitted]  vendor
              static/js/app.b22ce679862c47a75225.js.map    22.2 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]  manifest
                                             index.html  507 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

这里有一个问题,如果利用默认的配置,发布生成的index.htm引用css和js是用的根目录,

为了解决这个问题,根据以下教程:

https://www.jianshu.com/p/f40de68f1f83

修改 config/index.js下的 build里面的assetsPublicPath属性,从'/'改成'./' 即可

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值