几个维度了解webpack（三）

几个维度了解webpack（三）

Vue和webpack

• 分析点
  • 项目结构
  • 基本命令
  • 开发配置
  • 工具配置
  • 其他

使用vue脚手架创建项目

• 使用vue-cli搭建文件夹
  • 使用npm全局安装vue-cli，在cmd中输入一下命令：npm install --global vue-cli;
• 创建vue项目：
  • 使用命令vue init webpack lf-webpack-vue；
    • lf-webpack-vue是项目名称，这个名字自己随便取。
  • 接下来一路确认，会创建项目名称、项目描述等；
  • Runtime + Compiler: recommended for most users
    • 运行加编译，既然已经说了推荐，就选它了；
  • Install vue-router? (Y/n)
    • 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
  • Use ESLint to lint your code? (Y/n)
    • 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，一般项目中都会使用。
  • Setup unit tests with Karma + Mocha? (Y/n)
    • 是否安装单元测试，选择不安装；
  • Setup e2e tests with Nightwatch(Y/n)?
    • 是否安装e2e测试 ，选择不安装；
  • 完成；
• 进入创建的项目，cd lf-webpack-vue
• 安装相关的依赖模块：npm i；
  • 建议不要用cnpm，安装有各种诡异的bug，可以通过如下操作解决npm速度慢的问题：

npm install --registry=https://registry.npm.taobao.org

vue-cli创建项目文件夹分析

|-- build : 打包相关的配置文件夹(基本不需要修改)
	|-- bulid.js : 
	|-- check-versions.js :
	|-- utils.js :
	|-- vue-loader.conf.js :
	|-- webpack.base.conf.js : 
	|-- webpack.dev.conf.js :
	|-- webpack.prod.conf.js : 
	|-- webpack.test.conf.js :         
|-- config:   
	|-- dev.env.js: 
	|-- index.js: 配置文件
	|-- prod.env.js:生产环境配置
	|-- test.env.js: 测试环境配置
|-- node_modules: 依赖的包，`npm i`下载直接下载到这里；
|-- src : 源码文件夹
	|-- assets文件夹
		|-- 图片和字体相关
	|-- components文件夹
	|-- router文件夹: 
	|-- App.vue: 
	|-- main.js: 
|-- static: 静态资源文件夹
	|-- 不需要处理的第三方文件
|-- test文件夹: 
	|-- e2e文件夹：类似浏览器测试
	|-- unit文件夹：单元测试
|-- .babelrc: babel的配置文件
|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
|-- .eslintignore: eslint忽略的文件
|-- .eslintrc.js: 
|-- .gitignore: git版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件 
|-- README.md: 应用描述说明的readme文件