几个维度了解webpack（三）

几个维度了解webpack（三）"/>

几个维度了解webpack（三）

几个维度了解webpack（三）

文章目录

• 几个维度了解webpack（三）
• • Vue和webpack
  • • 使用vue脚手架创建项目
    • vue-cli创建项目文件夹分析

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=

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文件