-
Vue Cli-09-CSS
引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。
这意味着你可以根据本地的文件结构用相对路径来引用静态资源。
另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。
更多细节请参考处理静态资源。
预处理器
你可以在...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-08-HTML 和静态资源
HTML
Index 文件
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。
在构建过程中,资源链接会被自动注入。
另外,Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS ...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-07-浏览器兼容性
browserslist
你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。
这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
现在查阅这里了解如何指定浏览器范围...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-06-vue cli service CLI 服务
使用命令
在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
这是你使用默认 preset 的项目的 package.json:
{
...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-05-plugin 插件和 Preset
插件
Vue CLI 使用了一套基于插件的架构。
如果你查阅一个新创建项目的 package.json,就会发现依赖都是以 @vue/cli-plugin- 开头的。
插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵活且可扩展。如果你对开发...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-04-创建一个项目
vue create
运行以下命令来创建一个新项目:
vue create hello-world
初始化完成后有日志提示,目录如下:
babel.config.js node_modules/ package.json package-lock.json public/ README.md src/
命令可选项
vue create 命令有一些可选项,你可以通过...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-03-prototype 项目原型快速开发
快速原型开发
你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
npm install -g @vue/cli-service-global
vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。
因此这只适用于快速原型开发。
vue serve
Us...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-02-install 安装
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
这里以前安装过,首先移除:
removed 236 packages, and audited 1 ...
2018-06-14 07:16:10 |
Vue