从零开始搭建Vue2.0项目(一)之快速开始
- 2022 年 7 月 26 日
- 筆記
从零开始搭建Vue2.0项目(一)之项目快速开始
前言
该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader
。确保还阅读vue-loader
的文档,了解常见的工作流程配方。
如果您只想尝试vue-loader
或快速制作出原型,请改用webpack-simple模板。
快速开始
要使用此模板,请使用vue-cli搭建项目。建议使用npm 3+以获得更有效的依赖关系树。
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
安装完成后,成功运行:
项目结构
.
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # ui组件
│ │ └── ...
│ └── assets/ # 模块资源(由webpack处理)
│ └── ...
├── static/ # 纯静态资源(直接复制)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── index.js # 测试构建条目文件
│ │ └── karma.conf.js # 测试跑步者配置文件
│ └── e2e/ # e2e测试
│ │ ├── specs/ # 测试spec文件
│ │ ├── custom-assertions/ # e2e测试的自定义断言
│ │ ├── runner.js # 测试跑步脚本
│ │ └── nightwatch.conf.js # 测试跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系
下面的内容建议根据需要自行了解哈,这里就不再细讲了!
想直接上手下一步配置的可以直接跳转到下一篇了
项目完整配置
详细配置参考webpack
官网://vuejs-templates.github.io/webpack/
Babel配置
该样板babel-preset-env
用于配置Babel。您可以在此处了解更多信息-//2ality.com/2017/02/babel-preset-env.html。因此,通过配置Babel
可以使程序运行在不同版本的浏览器中(比如:IE 11+)
一个Babel预设,可根据目标浏览器或运行时环境自动确定所需的Babel插件和polyfill,从而将ES2015 +向下编译为ES5。
它用于browserslist
解析此信息,因此我们可以使用所支持的browserslist
任何有效查询格式。
但是有一个警告。browserslist
建议在定义像一个共同的地方目标package.json
或在.browserslistrc
配置文件中。这允许像autoprefixer
和eslint-plugin-compat
共享配置的工具。对于此模板,browserslist
在中配置package.json
:
{
"...": "...",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
但最新的稳定版本babel-preset-env
,v1.6.1
不支持从中加载配置package.json
。因此,在中重复了目标环境.babelrc
。如果要更改目标环境,请确保同时更新package.json
和.babelrc
。请注意,此问题已在beta版本(@babel/preset-env@7.0.0-beta.34
)中修复,一旦模板超出beta版本,模板就会进行更新。
Linter配置
该样板使用ESLint作为临时对象,并使用带有一些小的定制的Standard预设。
如果您对默认的掉毛规则不满意,则可以选择以下几种方法:
-
覆盖中的单个规则
.eslintrc.js
。例如,您可以添加以下规则来强制使用分号而不是省略分号:// .eslintrc.js "semi": [2, "always"]
-
生成项目时,请选择其他ESLint预设,例如eslint-config-airbnb。
-
生成项目并定义自己的规则时,为ESLint预设选择“无”。有关更多详细信息,请参见ESLint文档。
修复棉绒错误
您可以运行以下命令让eslint修复发现的任何错误(如果可以的话-并非所有错误都可以像这样修复):
npm run lint -- --fix
(--
中间的,以确保将--fix
选项传递给eslint
,而不是npm
)是必要的
预处理器
此样板为大多数流行的CSS预处理器(包括LESS,SASS,Stylus和PostCSS)预先配置了CSS提取。 要使用预处理器,您需要做的就是为其安装适当的webpack加载器。 例如,要使用SASS:
npm install sass-loader node-sass --save-dev
请注意,您还需要安装node-sass,因为sass-loader将其视为对等依赖关系。
在组件内部使用预处理器:
安装完成后,您可以使用* .vue组件中的预处理器,使用