vue项目搭建以及全家桶的使用详细教程(小结)(2)

  • 后面几个是测试的工具,需要自己自行了解
  • ......
  • 紧接着,我们使用cd squareRoot 移动到文件夹squareRoot下,执行

    npm install

    初始化项目,安装package.json 文件中描述的依赖,初始化完成后,我们可以通过

    npm run dev

    运行我们的项目,这个时候,我们可以打开浏览器,输入http://localhost:8080/,可看到如下界面,说明我们的项目脚手架已经初始化完成;

    步骤三、项目结构解析

    虽然我们是通过vue-cli生成的项目结构,但还是希望读者能够清楚的知道每个文件的作用,这样对于我们学习该脚手架以及搭建自己的脚手架会有很好的帮助,如下图,是一级目录下的文件的作用:

    构建相关的代码主要是放在build文件夹和config文件夹下,包括了开发环境和生产环境,即dev和product,可以打开文件进行阅读,有接触过node的小伙伴应该可以很快读懂对应文件代码的作用,这里就不做详细的介绍了,需要注意的一点是,我们需要修改打包后文件的路径的时候,可以通过修改config文件夹下的index.js文件,如下图:

    这里,我们需要在src目录下新增一个page文件夹,用于存放页面相关的组件,而components存在的是公共的组件,这样做有利于我们更好的理解项目:

    步骤四、引入UI框架iView

    该步骤并不是一定要实现的,实际项目操作中,要根据具体需求而引入对应的UI框架或者不引入,鉴于指导的作用,在此处也做个示范,给与参考,可先阅读iVew官网学习;

    内容版权声明:除非注明,否则皆为本站原创文章。

    转载注明出处:http://www.heiqu.com/85.html