vue init webpack创建项目

1.开发环境 vue+webpack
2.电脑系统 windows10专业版
3.在开发的过程中,我们经常会使用到webpack,下面我来分享一下如何使用vue+webpack创建项目。
4.在终端输入:

vue init webpack chen 
//管理员身份,
// chen 表示你要创建项目的名称,不能是大写

5.选择解释:

一.Project name :项目名称,如果不需要就直接回车
二:Project description:项目描述
三:Author: 作者
四:Vue build :构建方式
 1.Runtime+Compiler:recommended for most users :
  解释:运行+编译:被推荐给大多数用户
 2.allowed in vue files-render functions are required elsewhere:(解释:只允许大约6kb比轻量的压缩文件,但只允许模板(或任何vue特定html)vue文件需要在其他地方呈现函数。大概意思是选择该构建方式对文件大小有要求。
 ///在这里推荐使用1,适合发多数用户
五:install vue-router?是否安装vue的路由插件,需要就选择y
六:Use ESLint to lint your code?是否使用ESLint检测你的代码
七:Pick an ESLint preset:选择分支风格
　　1.standard(https://github.com/feross/standard) js的标准风格
　　2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
　　3.none (configure it yourself) 自己配置

6.配置文件分析:

{ //这个代码块里的都是项目描述，是创建者自定义的
  "name": "qqmusic",  //项目名称
  "version": "1.0.0",   //项目版本
  "description": "qq music app by vue", //项目描述
  "author": "author", //项目作者
  "private": true, //是否为私有
  "scripts": { //这里是命名一些变量对应什么指令
    "dev": "node build/dev-server.js", //运行dev 相当于运行node build/dev-server.js
    "start": "node build/dev-server.js", //同上
    "build": "node build/build.js", //同上
    "lint": "eslint --ext .js,.vue src" //同上
  },
  "dependencies": { //这个代码块描述此 项目依赖 的插件；下面两个做什么的自行搜索
    "vue": "^2.2.6", 
    "vue-router": "^2.3.1"
  },
  "devDependencies": { //这个代码块里描述的是此项目 运行依赖 插件；注意根上面项目依赖的区分
    "autoprefixer": "^6.7.2", //这英文翻译过来就是：自动 预 修复者，专业称呼知道的可以回复下；它是一个css前缀处理工具，有了它我们就不用写很多前缀了
        ...
  },
  "engines": { // 引擎相关的内容
    "node": ">= 4.0.0", //要求node版本要大于指定版本，否则不给你运行~
    "npm": ">= 3.0.0" //要求npm版本大于指定版本
  },
  "browserslist": [ // 配置浏览器的信息查询范围，这些信息将给Autoprefixer babel-env-preset eslint-plugin-compat这些组件来使用 https://www.npmjs.com/package/browserslist
    "> 1%", //
    "last 2 versions", //每种浏览器的最近的两个版本
    "not ie <= 8" //IE8及以下版本不查询
  ]
}

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。