几个维度了解webpack(三)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mutouafangzi/article/details/88915257

几个维度了解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文件
展开阅读全文

没有更多推荐了,返回首页