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>

一分钟理清Vue-cli 代码构建步骤。的更多相关文章

  1. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  2. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  3. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  4. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  5. jenkins检查代码,如没更新停止构建步骤

    需求分析 在jenkins中没有找到构建前插件,每次构建时间很长,希望可以实现判断代码是否更新,如果没更细则停止构建步骤. 实现步骤 在构建时执行shell命令,而jenkins提供的的环境变量可以实 ...

  6. vue源码构建代码分析

    这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...

  7. 第一章构建vue项目,代码仓库管理

    一.安装node.js.vue-cli脚手架 1.安装node.js 下载地址:https://nodejs.org/en/download 查看版本号 node -v .npm -v 出现版本号即安 ...

  8. 用@vue/cli发布npm包

    1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...

  9. vue cli 平稳升级webapck4

    webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应 ...

随机推荐

  1. [转]Oracle存储过程总结

    原文地址:https://www.cnblogs.com/tingbogiu/p/5641000.html 1.存储过程结构 1.1 第一个存储过程 create or replace procedu ...

  2. Extjs gridpanel 合并单元格

    /* * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格.调用方法示例: * *store.on("load",function(){gridSpan(grid,&qu ...

  3. # Writing your first Django app, part 2

    创建admin用户 D:\desktop\todoList\Django\mDjango\demoSite>python manage.py createsuperuser 然后输入密码 进入a ...

  4. 前端常用功能记录(三)—datatables表格初始化(转)

    数据源 我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行 ...

  5. 从零写Java Web框架——请求的处理DispatcherServlet

    大概思路 继承 HttpServlet,实现 DispatcherServlet,拦截所有请求: DispatchServlet 重写 init()方法,负责初始化框架: 重写 service()方法 ...

  6. 适配器模式,装饰模式,代理模式异同<转>

    节前把3个设计模式的学习心得分享了一下,分别是适配器模式,装饰模式,代理模式. 但是似乎越写越有些迷糊,这三种模式都有着一些大同小异的地方,总是有些搞不清. 今天再重新学习下,把学习心得分享给大家一下 ...

  7. STM32f103的数电采集电路的TIMER定时器的使用与时序控制的程序

    STM32 的通用定时器是一个通过可编程预分频器(PSC)驱动的 16 位自动装载计数器(CNT)构成.STM32 的通用定时器可以被用于:测量输入信号的脉冲长度(输入捕获)或者产生输出波形(输出比较 ...

  8. strace用法说明

    strace命令详解strace 命令是一种强大的工具,它能够显示所有由用户空间程序发出的系统调用. strace 显示这些调用的参数并返回符号形式的值.strace 从内核接收信息,而且不需要以任何 ...

  9. 如何防止Arp攻击

    首先需要查找网关的IP和MAC地址. 查看的方法很多,最直接的在cmd里面执行arp -a.但这是被arp攻击之前,被攻击成功后,192.168.0.1对应的mac地址会变成攻击电脑的Mac地址. 还 ...

  10. Drupal 开发必备利器

    http://drupalchina.cn/node/3436 转自 测试模块.主题.发行版的网站: http://simplytest.me/ Drupal API: https://api.dru ...