几个维度了解webpack(三)"/>
几个维度了解webpack(三)
几个维度了解webpack(三)
文章目录
- 几个维度了解webpack(三)
- Vue和webpack
- 使用vue脚手架创建项目
- vue-cli创建项目文件夹分析
Vue和webpack
- 分析点
- 项目结构
- 基本命令
- 开发配置
- 工具配置
- 其他
使用vue脚手架创建项目
- 使用vue-cli搭建文件夹
- 使用npm全局安装vue-cli,在cmd中输入一下命令:
npm install --global vue-cli
;
- 使用npm全局安装vue-cli,在cmd中输入一下命令:
- 创建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文件
更多推荐
几个维度了解webpack(三)
发布评论