vue-cli是用来生成 vue项目的命令行工具,它的使用方法是这样的:

vue init <template-name> <project-name>
第二个参数 template-name 就是我们打算使用的模板,目前,模板是通过github上vue-templates这个组织进行发布。我们通常使用的vue init webpack my-project, 其中webpack指的就是 基于webpack的vuejs初始化模板。
本文就根据webpack这套模板(https://github.com/vuejs-templates/webpack/tree/master/template
进行介绍,基于的版本是#658

首先来到package.json文件里,package.json是npm的配置文件,里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。

  • 注,其中{{}}的变量是vue-cli的变量

{ 
"name": "{{ name }}",// 项目名称
"version": "1.0.0",// 版本
"description": "{{ description }}",// 描述
"author": "{{ author }}",// 作者
"private": true,//是否私人项目
"scripts": {
  "dev": "node build/dev-server.js",// npm run dev 的 dev,使用node执行 build/dev-server.js
  "start": "node build/dev-server.js",// npm run start 跑的是同样的命令
  "build": "node build/build.js"{{#unit}
},// npm run build 跑的是 node build/build.js
// 以下脚本为单元测试用到的脚本
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run"{{/unit}}{{#e2e}},
"e2e": "node test/e2e/runner.js"{{/e2e}}{{#if_or unit e2e}},
"test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{/if_or}}{{#lint}},
"lint": "eslint --ext .js,.vue src{{#unit}} test/unit/specs{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}"{{/lint}} },
// dependencies 设定的是项目里使用的依赖,devDependencies设定的是开发使用的依赖
"dependencies": {
  "vue": "^2.2.6"{{#router}},// 项目依赖vue.js
  "vue-router": "^2.3.1"{{/router}}// 项目依赖vue-router
},
"devDependencies": {
  "autoprefixer": "^6.7.2",// 是用于给css3属性自动加属性前缀的 // babel相关的都是用于处理es6语法的
  "babel-core": "^6.22.1",
  {{#lint}} "babel-eslint": "^7.1.1",
  {{/lint}} "babel-loader": "^6.2.10",
  "babel-plugin-transform-runtime": "^6.22.0",
  "babel-preset-env": "^1.3.2",
  "babel-preset-stage-2": "^6.22.0",
  "babel-register": "^6.22.0", //
  "chalk": "^1.1.3",// chalk适用于格式化输出命令行信息的,比如run dev以后的start...
  "connect-history-api-fallback": "^1.3.0",//
  "copy-webpack-plugin": "^4.0.1",//
  "css-loader": "^0.28.0",// 所有的*-loader都是 webpack的扩展,webpack是把各种资源理解为一个模块,css-loader就是读取css模块的加载器
{{#lint}}
// eslint 是代码格式化检查工具,开启以后要严格遵照它规定的格式进行开发
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
{{#if_eq lintConfig "standard"}} "eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
{{/if_eq}} {{#if_eq lintConfig "airbnb"}} "eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.2.0",
{{/if_eq}} {{/lint}} "eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",// express 用于启动 node http server的服务
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",// webpack 里载入和处理html的插件
"http-proxy-middleware": "^0.17.3",// node server 的中间件工具
"webpack-bundle-analyzer": "^2.2.1",
{{#unit}} "cross-env": "^4.0.0",// 设定环境变量的工具,NODE_ENV变量跟它有关
// karma相关的都是单元测试工具
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.2",
"lolex": "^1.5.2",
"mocha": "^3.2.0",
"chai": "^3.5.0",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^3.0.0",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
{{/unit}} {{#e2e}} "chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
{{/e2e}} "semver": "^5.3.0",// 一个版本检查工具
"shelljs": "^0.7.6",// selljs是在node里跑shell命令的工具,比如‘rm -rf’ "opn": "^4.0.2",
// 跨平台的开启文件或者网页的工具
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",// 命令行里自动运行的信息提示
"rimraf": "^2.6.0",// 跑shell命令 rm-rf 的工具
"url-loader": "^0.5.8", // 配合webpack的加载器
"vue-loader": "^11.3.4", // 配合webpack的加载器
"vue-style-loader": "^2.0.5", // 配合webpack的加载器
"vue-template-compiler": "^2.2.6", // vue-template-compiler,可能是配合离线版vue
// webpack相关的用于,把图片,*.vue, *.js, 这些组合成最终的项目,webpack-dev用于跑测试服务器
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0" },
// 项目依赖的引擎版本
"engines": {
  "node": ">= 4.0.0",
  "npm": ">= 3.0.0"
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
] }

vue-cli 脚手架项目简介(一) - package.json的更多相关文章

  1. vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

    废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...

  2. 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 问题解决

  3. 13. Vue CLI脚手架

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

  4. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  5. 【vue】vue-cli 脚手架项目简介(一) - package.json

    vue-cli是用来生成 vue项目的命令行工具,它的使用方法是这样的: vue init <template-name> <project-name>第二个参数 templa ...

  6. vue 脚手架(二,项目依赖说明 package.json)

    本文以转移至本人的个人博客,请多多关注! 本文以转移至本人的个人博客,请多多关注! 本文以转移至本人的个人博客,请多多关注! 本文以转移至本人的个人博客,请多多关注! 继续上一篇, 上一篇讲了 vue ...

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

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

  8. vue cli搭建项目及文件引入

    cli搭建方法:需安装nodejs先 1.npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载 ...

  9. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

随机推荐

  1. 【sed / awk脚本编写】

    awk awk分为BEGIN部分,正则匹配部分,END部分三部分. 我一般在BEGIN部分定义一些变量,正则部分用于匹配和执行一些解析和统计,END部分用于输出结果. 总体结构: awk 'BEGIN ...

  2. 三.实例演示insert/update/delect更新数据库

    1.逻辑图 2.只是准备 3.代码展示 import pymysql conn=pymysql.connect( host='192.168.199.249', port=3306, user='ro ...

  3. Oracle11g的安装卸载及经常使用工具的使用

    Oracle11g的安装卸载及经常使用工具的使用 目的: (1) 掌握Oracle 11g数据库的安装与卸载过程. Oracle11g的安装卸载及经常使用工具的使用 目的: (1) 掌握Oracle  ...

  4. BCrypt 加密实现

    Bcrypt百度百科: bcrypt,是一个跨平台的文件加密工具.由它加密的文件可在所有支持的操作系统和处理器上进行转移.它的口令必须是8至56个字符,并将在内部被转化为448位的密钥. 除了对您的数 ...

  5. Django——请求生命周期

    视图层之视图函数(views) 一个视图函数,简称视图,他可以接受Web请求,并且必须返回一个Web响应,响应内容可以是一个HTML内容,一张图片,一个404错误,一个文档等等,都可以称为web为你响 ...

  6. 利用开源的TaskScheduler组件实现监控和管理windows计划任务

    对于计划任务的执行有很多种解决方案,如利用开源Quartz作业调度框架,在SQL Server的作业等等,同时Windows的任务计划程序功能也很强大,利用此可以很方便的实现很多计划任务,除了人工进行 ...

  7. 杭电1025Constructing Roads In JGShining's Kingdom

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=1025 题目: Problem Description JGShining's kingdom consis ...

  8. HDU - 2819 Swap (二分图匹配-匈牙利算法)

    题意:一个N*N的01矩阵,行与行.列与列之间可以互换.要求变换出一个对角线元素全为1的矩阵,给出互换的行号或列号. 分析:首先一个矩阵若能构成对角线元素全为1,那么矩阵的秩为N,秩小于N的情况无解. ...

  9. [转]《Python爬虫学习系列教程》

    <Python爬虫学习系列教程>学习笔记 http://cuiqingcai.com/1052.html 大家好哈,我呢最近在学习Python爬虫,感觉非常有意思,真的让生活可以方便很多. ...

  10. Dubbo之RPC架构

    为什么会有dubbo的出现: 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当 ...