很早以前就开始看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. Android 8.1 关机充电动画(一)模式选择

    system:Android 8.1 platform:RK3326/PX30 uboot kernel Android 8.1 关机充电动画(一)模式选择 Android 8.1 关机充电动画(二) ...

  2. 目前校园百晓生APP与CSDN软件的对比

    不忘初心.注入灵魂 设计之初 在做校园百晓生该APP时,初心是为校园的同学提供便捷的查询校园信息的服务,确实目前的软件已经实现了该功能,但是总感觉缺少一些灵魂,感觉大部分人渴望的重点在于信息而不是自己 ...

  3. Android showStatusIcon on inactive InputConnection异常

    在开发的时候突然发现在输入文本框中点击输入法的删除按钮,发现app莫名其妙退出 了.log信息如下: 01-31 16:57:59.524: W/IInputConnectionWrapper(125 ...

  4. 如何在一台计算机上安装多个 JDK 版本

    前言 对于使用 Java 语言开发的朋友可能会遇到这种情况,有时想学习和探索 Java 的最新版本提供的一些新特性,比如 Java 11,但你无法将其安装在自己的计算机上,因为你的团队正在使用比这个旧 ...

  5. 八个开源的 Spring Boot 前后端分离项目,一定要收藏!

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

  6. docer run 、docker attach 与 docker exec的区别

    进入容器的方式有以下三种: 使用ssh登陆进容器 使用nsenter.nsinit等第三方工具 使用Docker本身提供的工具 最佳方案为使用Docker本身提供的工具 docker run:创建和启 ...

  7. InnoDB存储引擎的高级特性大盘点

    InnoDB作为mysql数据库最常用的存储引擎,自然包含了其独有的很多特性.如相比于memory.MyISAM引擎,InnoDB支持行级锁.事务等都是比较重要的特性. 本文将盘点下InnoDB处理事 ...

  8. 六、表达式:前缀&&后缀

    count为运算后的值.

  9. ExtJS--grid表格前多选列

    为grid添加selModel属性: selModel:Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE"}),//设置 ...

  10. Blazor WebAssembly 候选版迁移手记

    前言 之前我写过一篇关于 Blazor WebAssembly 的文章浏览器中的 .Net Core —— Blazor WebAssembly 初体验,如今已经更新到 RC-1,与预览版有着较大的差 ...