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

Posted 2020-09-25 Apple

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.json和webpack/babel等

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