一分钟理清Vue-cli 代码构建步骤。

2018-06-24 01:32:04来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、

$ npm install vue -cli -g

$ vue init webpack project-name

$ cd project-name

$ npm install

$ npm run dev

2、打开项目文件夹,开发目录主要为src, assets下存放想要放置的图片,commponents下存放自己写好的组件,组件之间相互调用;src下同样可以创建自定义文件夹,用来存放图片、路由、配置、样式等

3、App.vue是所有vue组件的老大,即主组件,所有组件通过互相调用有了联系,最外层的组件导入到App.vue中之后,并输出,该组件里写html页面整体的样式,如html/body/#app等。

4、各个组件单独写自己所涉及的样式及js

5、main.js为所有项目打包的js的入口文件,这里要引用所有主要的东西:

   Vue

   App

   vue-resource

   vue-router

   vuex

  并注册相应实例或创建相应的实例

6、配置paskage.jsonwebpack/babel

7、根目录下的index.htmlhtml的主文件,即主要的html框架写在这里,所有的js最后是要渲染到这里的。并定义最外层容器,比如<div id=”app”></div>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS中的onmouseover和hover有什么区别

下一篇:css之盒子模型