简单的目录结构:
　　|-index.html
　　|-main.js 入口文件
　　|-App.vue vue文件，官方推荐命名法
　　|-package.json 工程文件(项目依赖、名称、配置)
　　npm init --yes 生成
　　|-webpack.config.js webpack配置文件

webpak准备工作:
　　cnpm install webpack --save-dev
　　cnpm install webpack-dev-server --save-dev

App.vue -> 变成正常代码 vue-loader@8.5.4
　　cnpm install vue-loader@8.5.4 --save-dev

　　cnpm install vue-html-loader --save-dev

　　vue-html-loader、css-loader、vue-style-loader、
　　vue-hot-reload-api@1.3.2

　　babel-loader
　　babel-core
　　babel-plugin-transform-runtime
　　babel-preset-es2015
　　babel-runtime

如果嫌自己配置项目基本配置有点麻烦!!!

建议使用脚手架!!!.

自己配置 vue 项目 知识体系(自己写脚手架 类似 vue-cli )的更多相关文章

  1. Vue大概知识体系和学习参考

    Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...

  2. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  3. Spring Boot +Vue 项目实战笔记（一）：使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  4. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  5. vue 项目知识

    Vue使用 Vue 源码解析 Vue SSR 如何调试Vue 源码 如何学习开源框架---> 从它的第一次commit 开始看 国外的文章 大致了解写框架的过程(英文关键字) 找到关键---&g ...

  6. Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解

    build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.en ...

  7. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  8. vue项目配置vuex

    在vue项目中各组件之间传值非常的好用,但是当组件数量多的时候,就会感觉到多个组件之间传值就会变的非常痛苦.因此就需要使用vuex来管理数据值,这样在任何页面不需要传值过来的情况下就可以拿到我们想要的 ...

  9. Vue项目经验

    Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...

随机推荐

  1. 招中高级web开发工程师

    >>招中高级web开发工程师

  2. 数组去重Demo引出的思考

    package com.pers.Stream; import java.util.*; import java.util.stream.Collectors; import java.util.st ...

  3. 使用Træfɪk(traefik)来加速Qt在线更新

    简述 在使用Qt的MaintenanceTool程序进行在线更新的时候遇到一个问题,就是访问download.qt.io实在太慢了,老是失败.所以想使用国内的镜像站来进行更新. 使用Qt的镜像站方法也 ...

  4. System.IO.File.WriteAllText("log.txt", "dddd");

    System.IO.File.WriteAllText("log.txt", "dddd");

  5. js实现sleep

    1.这种不是匀速, 写到for循环中出现1,2,3.......456....的情况 function sleep(milliseconds) { var start = new Date().get ...

  6. 离线环境下安装ansible，借助有网环境下pip工具

    环境 有网的机器(192.168.19.222):rhe65,python2.7.13,pip9.0.1 离线机器(192.168.19.203):rhe65,python2.6 FTP(192.16 ...

  7. 【java】[文件上传jar包]commons-fileUpload组件解决文件上传(文件名)乱码问题

    response.setContentType("text/html; charset=UTF-8");  Boolean isMultipart = ServletFileUpl ...

  8. 【iCore4 双核心板_uC/OS-II】例程九：消息队列

    一.实验说明: 前面介绍通过信息传递可以进行任务间的交流,信息也可以直接发送给一个任务,在uC/OS-II中每一个任务在它们内部都有一个消息队列,也即任务消息队列,用户可以直接给一个任务发送消息,不需 ...

  9. 通过反射调用Unity编辑器提供的各种功能

    Unity编辑器功能丰富易上手,其实编辑器提供的大多数菜单操作,在代码里面都是能够找到对应接口的,但是这些接口都没有对我们开放,怎么办? 很简单,直接使用反射调用即可. 首先使用Reflector或I ...

  10. Laravel-mix 中文文档

    镜像地址 : https://segmentfault.com/a/1190000015049847原文地址: Laravel Mix Docs   概览   基本示例 larave-mix 是位于w ...