从零开始搭建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

从零开始搭建Vue2.0项目(一)之快速开始-LMLPHP

安装完成后,成功运行:

从零开始搭建Vue2.0项目(一)之快速开始-LMLPHP

项目结构🌈

.
├── 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官网:http://vuejs-templates.github.io/webpack/😎

Babel配置

该样板babel-preset-env用于配置Babel。您可以在此处了解更多信息-http://2ality.com/2017/02/babel-preset-env.html。因此,通过配置Babel可以使程序运行在不同版本的浏览器中(比如:IE 11+)

它用于browserslist解析此信息,因此我们可以使用所支持的browserslist任何有效查询格式

但是有一个警告。browserslist建议在定义像一个共同的地方目标package.json或在.browserslistrc配置文件中。这允许像autoprefixereslint-plugin-compat共享配置的工具。对于此模板,browserslist在中配置package.json

{
  "...": "...",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

但最新的稳定版本babel-preset-envv1.6.1不支持从中加载配置package.json。因此,在中重复了目标环境.babelrc。如果要更改目标环境,请确保同时更新package.json.babelrc。请注意,此问题已在beta版本(@babel/preset-env@7.0.0-beta.34)中修复,一旦模板超出beta版本,模板就会进行更新。

Linter配置

该样板使用ESLint作为临时对象,并使用带有一些小的定制的Standard预设。

如果您对默认的掉毛规则不满意,则可以选择以下几种方法:

  1. 覆盖中的单个规则.eslintrc.js。例如,您可以添加以下规则来强制使用分号而不是省略分号:

    // .eslintrc.js
    "semi": [2, "always"]
    
  2. 生成项目时,请选择其他ESLint预设,例如eslint-config-airbnb

  3. 生成项目并定义自己的规则时,为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组件中的预处理器,使用

07-27 08:20