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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

小程序不同页面之间的传值方式

今天来说一下小程序不同页面之间传值的几种方式: 1、URL传值 这种方式最常用,比如: wx.navigateTo({ url: '../detail/d...

72210
来自专栏雪地二货笔记库

vue学习笔记5-事件绑定-v-on

效果也相同。 而且vue也封装了好多方法,可以用这些方法简介开发 例如@keyup.enter="a",如果按下键盘的时候按下的是回车,那么就可以直接触发a方法...

1121
来自专栏Python自动化测试

页面对象的定位

在自动化的测试中,对象元素的定位和操作是自动化的核心部分,但是对象是定位是自动化的基础,在对象的基础上,才可以形成对对象的操作。

923
来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

27310
来自专栏九彩拼盘的叨叨叨

远程调试手机页面工具:Weinre 介绍

Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。

1063
来自专栏娱乐心理测试

小程序设置启动页面

7136
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

3798
来自专栏前端人人

React技巧2(避免无意义的父节点)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React 技巧1(状态组件与无状态组件的使用) --...

3625
来自专栏一枝花算不算浪漫

[小知识点]绝对路径与相对路径.

31811
来自专栏Play & Scala 技术分享

[Play-Scala-2.2.1] 接收jQuery Post的原始字符串请求

3258

扫码关注云+社区

领取腾讯云代金券