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

发布时间:2020-04-07 19:50:35 作者:蓓蕾心晴
来源:网络 阅读:461

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>


推荐阅读:
  1. Vue-cli原理分析
  2. vue-cli构建vue项目的步骤详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue vue-cli 快速学习

上一篇:Centos7.2 lnmp rpm包,php-fpm 搭建wordpress博客

下一篇:ma680t开局指导

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》