很早以前就开始看vue2.0和webpack,但总是留不下深刻的印象,一直缺少一个可以贯通的项目,而且工作也没有时间,最近辞职在家,从网上找了个项目,写了大概八天,踩了无数的坑啊!!

下载的项目包括,设计图,源码什么的都有,只不过是它基于vue1.0构建的,我用vue2.0从头写了一遍

先写下项目流程

1.vue-cli脚手架创建项目目录(具体可见官网:https://github.com/vuejs/vue-cli)

npm install vue-cli -g

初始化项目依赖:(选择webpack来构建打包项目)

vue init <template-name> <project-name>
vue init webpack my-project

上面那几个相应的选择下,ESLint是规范代码,我关了,因为开了之后很蛋疼,一直报错,喜欢的可以开下,感受一下,下面两个是用来单元测试的,不用开;

此时你的根目录下应该会有自多搭建的相应的目录

打开根目录下的 package.json 文件,里面是本次项目所需要的依赖,就是各种压缩,解析,路径等等的东西;所以我们要在命令行中运行

npm install

来安装这些npm依赖包;安装完成后项目会多出一个叫 node_modules 的文件夹

webpack具体的配置,都在bulid和 config里面,里面的属性我还没有全部弄明白,有时间定会去深究;

webpack+vue2.0项目 (一) vue-cli脚手架的更多相关文章

  1. webpack vue2.0项目脚手架生成的webpack文件

    var path = require('path') var utils = require('./utils') var config = require('../config') var vueL ...

  2. webpack+vue2.0项目 (二)热加载,vue-router

    目录创建好之后,命令行输入 npm run dev 因为在配置文件config/index.js里: dev: { env: require('./dev.env'), port: 8080, aut ...

  3. webpack vue2.0项目配置文件详解

    const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('h ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

    这几天进入 Vue CLI 官网,发现不能选择 Vue CLI 的版本,也就是说查不到 vue-cli 4 以下版本的文档. 如果此时电脑上安装了 Vue CLI,那么旧版安装的 vue 项目很可能会 ...

  6. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  7. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  8. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  9. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

随机推荐

  1. 面试官:小伙子,听说你看过ThreadLocal源码?(万字图文深度解析ThreadLocal)

    前言 Ym8V9H.png (高清无损原图.pdf关注公众号后回复 ThreadLocal 获取,文末有公众号链接) 前几天写了一篇AQS相关的文章:我画了35张图就是为了让你深入 AQS,反响不错, ...

  2. LeetCode--Array--Remove Duplicates from Sorted Array (Easy)

    26. Remove Duplicates from Sorted Array (Easy) Given a sorted array nums, remove the duplicates in-p ...

  3. # C#学习笔记(一)——准备工作

    C#学习笔记(一)--准备工作 目录 C#学习笔记(一)--准备工作 1.1 下载安装.NET框架 1.2 创建源代码 1.3 一些基本名称 1.4 简单的命名建议 1.1 下载安装.NET框架 .N ...

  4. 深入理解JS中的对象(一)

    目录 一切皆是对象吗? 对象 原型与原型链 构造函数 参考 1.一切皆是对象吗? 首先,"在 JavaScript 中,一切皆是对象"这种表述是不完全正确的. JavaScript ...

  5. Azure AD(二)调用受Microsoft 标识平台保护的 ASP.NET Core Web API 上

    一,引言 上一节讲到Azure AD的一些基础概念,以及Azure AD究竟可以用来做什么?本节就接着讲如何在我们的项目中集成Azure AD 包含我们的API资源(其实这里还可以在 SPA单页面应用 ...

  6. STM32 OSAL操作系统抽象层的移植

    文章目录 什么是 OSAL? 源码安装 Linux 上OSAL的移植 STM32上OSAL的移植 关键点 测试代码 结语 附件 什么是 OSAL? 今天同学忽然问我有没有搞过OSAL,忽然间一头雾水, ...

  7. python小游戏-pygame模块

    一.tkinter模块的GUI 基本上使用tkinter来开发GUI应用需要以下5个步骤: 导入tkinter模块中我们需要的东西. 创建一个顶层窗口对象并用它来承载整个GUI应用. 在顶层窗口对象上 ...

  8. Python 的缩进是不是反人类的设计?

    前些天,我写了<Python为什么使用缩进来划分代码块?>,文中详细梳理了 Python 采用缩进语法的 8 大原因.我极其喜欢这种简洁优雅的风格,所以对它赞美有加. 然而文章发出去后,非 ...

  9. tp5参数传入

    把应用配置文件中的url_param_type参数的值修改如下: // 按照参数顺序获取 'url_param_type' => 1, 现在,URL的参数传值方式就变成了严格按照操作方法的变量定 ...

  10. resize允许你控制一个元素的可调整大小性