浅析vue-cli及其应用

  vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了webpack,npm,nodejs,babel,vue,vue-router

  1、安装

  先安装npm,然后使用下面的命令安装:

  npm install vue-cli -g

  其中,-g表示全局安装

  2、项目初始化

  基于vscode的Vue前端环境搭建问题及解决办法

  可以在这里看看vue-cli脚手架这些的环境搭建与使用。

  3、开源项目运行

  开源项目呢,可以自己去GitHub上找找,下载zip或者pull下来之后,vscode打开,环境配置可以看前面这个文章。

  使用vue编译项目:

  npm run dev

  结果报错:

  查了很多说是因为webpack的版本不对,需要安装webpack依赖吧,装呗

  npm install

  (如果不行可以这么做:

  可以通过修改npm的配置文件让npm到另外的pacakge mirror站点去找package,通过如下命令

  $ npm config set registry https://registry.npm.taobao.org

  $ npm config set registry http://r.cnpmjs.org

  或者:npm config set registry http://registry.npmjs.eu

  随后再执行

  npm install

  然后就可以运行了

  )

  再npm run dev就可以了:

  这就表示你可以去http://localhost:8080那个链接下面看你的网页运行结果了。

  4、vue项目结构

  一个vue项目的结构如下所示:

  重点就在src这里,其他的人家都说可以暂时了解,我觉得有时间的时候还是要搞明白一下的。

  偷一张图放这里,大家参考看看。

  上面npm install的东西就再node_modules这个里面。

  build文件主要是webpack的配置。

  config文件主要是项目相关配置,常用的就是当端口冲突时配置监听端口,打包输出路径及命名等,目录详情。

  下一次我将分享src目录的结构,这个太重要了,我也要好好学学了。

  项目太急就想着在别人的基础上改改了。

  如果对C++,编译,图像处理,tensorflow框架,计算机视觉算法有兴趣的朋友可以关注我。我的新书《深度学习计算机视觉实战》已经写完了,主要包含常用计算机视觉算法论文的导读笔记,视觉算法的模型训练,模型的转换与部署,移动端与PC端部署都讲了,也确实是我在做的,这本书在今年第二季度将由电子工业出版社出版出来,各路朋友多捧场,谢谢。

  借着做前端的这个机会,以后看看Tensorflow.js看看把深度学习部署到web端。

  

标签