很早以前就开始看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. 【MySQL基础总结】索引的使用

    索引的使用 概述 1.索引由数据库中一列或多列组合而成,其作用是提高对表中数据的查询速度 2.索引的优点是可以提高检索数据的速度 3.缺点是创建和维护索引需要耗费时间 4.所以索引可以提高查询速度,减 ...

  2. Linux文件操作命令并举例说明其作用

    ls ,常用于查看当前文件下有工作中需要的文件 cd, 常用于进行切换文件的位置 vim,常用于编辑软件系统相关的配置文件 ps –ef|grep jdk,常用语显示跟jdk有关的进程   |:表示 ...

  3. 导出jar包和api文档

    导出jar包过程 右击项目名称->export 选择java->JAR file next->选择路径 导出成功 生成api文档 选择doc->右键export java-&g ...

  4. [hdoj5192] 树状数组

    枚举所有的区间.对于确定的区间,假设最终的高度为h, 代价是max(∑(Hi−h),∑(h−Hj))(Hi>h,Hj≤h) 等价于max(∑Hi−cnt(i)∗h,cnt(j)∗h−∑Hj) ( ...

  5. Spark2.4.5集群安装与本地开发

    下载 官网地址:https://www.apache.org/dyn/closer.lua/spark/spark-2.4.5/spark-2.4.5-bin-hadoop2.7.tgz 验证Java ...

  6. docker build报错

    docker build 遇到问题 "can  not stat ... APPData\Local\Application Data" 解决方法:

  7. C# 数据操作系列 - 8. EF Core的增删改查

    0.前言 到目前为止,我们看了一下如何声明EF Core的初步使用,也整体的看了下EF Core的映射关系配置以及导航属性的配置. 这一篇,我带大家分享一下,我在工作中需要的EF Core的用法. 1 ...

  8. k8s big-ip control 安装使用

    k8s big-ip control 安装使用 0. 准备工作 网络打通,这里没有使用fannel,没有使用vxlan . 在f5界面 创建f5分区.这里是cce-test. 1. 安装bigip c ...

  9. Django模板之自定义过滤器/标签/组件

    自定义步骤: 1.     在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.     在app应用中创建templatet ...

  10. 在php文件中xml格式

    本人是小白,有错误的地方请指正,勿喷! 在写一个调查问卷的过程中用到了xml文件,如想要了解,可以通过以下链接简单学习:http://www.w3school.com.cn/xml/ 所用工具:php ...