Vue-cli webpack模板
Vue webpack项目开始构建模板使用,关键内容摘要
中文文档 https://loulanyijian.github.io/vue-cli-doc-Chinese/
0 安装和使用 vue-cli
$ npm install -g vue-cli # 全局安装vue-cli
$ vue init webpack my-project # 使用vue-cli初始化一个完整的webpack项目。
$ cd my-project # 进入目录
$ npm install # 安装依赖 (package.json)
$ npm run dev # 启动开发环境版本
使用Vue-cli命令行工具初始化基于模板的项目的命令语法:
$ vue init <template-name> <project-name>
可用 vue list
命令查看所有模板类型
1 项目结构
├── build/ # webpack 编译任务配置文件: 开发环境与生产环境
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 模块资源 (会被webpack处理)
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .eslintrc.js # eslint 配置文件
├── index.html # index.html 入口模板文件
└── package.json # 运行的脚本与相关依赖
build/
包含实际为开发环境与生产环境的webpack配置文件。通常不需要关注这些文件,除非想自定义webpack的loader,这样的话,你应当先看看 build/webpack.base.conf.js
这个文件。
config/index.js
主要的配置文件,包含构建中最常用的一些配置。
src/
应用程序源码文件。如何组织目录结构取决于开发者。如果使用Vuex/VueRouter,可以自行添加store/router目录。一般结构如下:
├── src/
| ├── ...
└── store
| ├── index.js # where we assemble modules and export the store
| ├── actions.js # root actions
| ├── mutations.js # root mutations
| └── modules
| │ ├── cart.js # cart module
| │ └── products.js # products module
| └── router/ # 路由
│ └── routes.js
static/
不想通过webpack处理的静态资源目录。这些目录中的资源会在webpack构建的时候,被直接复制到相同的目录中。
开发中使用的资源文件,在src/assets
目录 。二者的区别:
assets
中的文件会被webpack处理成模块依赖,这些资源可能会在构建过程中被内联/复制/重命名;而static/
并非由Webpack来处理:它们被直接复制到最终目标目录。这些文件使用绝对路径,这个可通过config/index.js
文件中的build.assetsPublicPath
和build.assetsSubDirectory
来控制。任何放置在
static/
的文件都使用绝对的URL/static/[filename]
来引用。如果你修改
assetSubDirectory
参数成assets
,然后这些URL需要变成/assets/[filename]
。
http://vuejs-templates.github.io/webpack/static.html
https://loulanyijian.github.io/vue-cli-doc-Chinese/static.html
test/unit
包含单元测试相关文件。
test/e2e
包含端到端测试相关文件。
index.html
应用中的 模板 index.html
。在开发环境中,webpack会生成相关资源,这些资源的url会自动插入到模板来渲染最终的HTML。
package.json
NPM包元数据文件,包括所有的构建依赖与构建命令。
2 构建命令
npm run dev
对应 package.json 中的NPM脚本命令
"scripts": {
"dev": "node build/dev-server.js",
//...
}
npm run build`
对应 package.json 中的
"scripts": {
//...
"build": "node build/build.js",
//...
}
3 预处理器
这个模板已经预设大部分流行的 css 预处理器,包括 LESS, SASS, Stylus, 和 PostCSS。要使用一个预处理器的话 ,所有你需要做的就是安装相应的webpack loader。例如,使用SASS:
npm install sass-loader node-sass --save-dev
你需要安装node-sass
,因为saas-loader
需要这个依赖项
在组件中使用
安装成功后, 你可以通过修改<style>
标签上的lang
属性,在你的*.vue
组件中使用预处理器。
<style lang="scss">
/* 写 SASS 代码! */
</style>
lang="scss"
对应CSS超集语法(用大括号和semicolones)。lang="sass"
对应缩进语法。
PostCSS
默认的情况下,在*.vue
文件中的样式会被PostCSS处理,所以你不需要用一个特殊的loader来操作它。如果你想用它的话,你可以简单的在build/webpack.base.conf.js
文件中添加PostCSS插件。
使用配置文件
从11.0开始vue-loader
支持自动加载postcss-loader
支持的PostCss配置文件:
postcss.config.js
.postcssrc
package.json
中的postcss
设置
使用配置文件允许您在由postcss-loader
处理的常规CSS文件和*.vue
文件内部CSS之间共享相同的配置,建议使用配置文件。
内联选项
或者,可以使用vue-loader
的postcss
选项专门为*.vue
文件指定postcss配置。
// webpack.config.js //for webpack 2.x
module.exports = {
// other options...
module: {
// module.rules is the same as module.loaders in 1.x
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// ... // vue-loader options goes here
postcss: [require('postcss-cssnext')()]
}
}
]
}
}
除了提供一个插件数组外,该postcss
选项还接受:
返回一个插件数组的函数;
包含要传递到PostCSS处理器选项的对象。这在使用依赖于自定义解析器/字符串的PostCSS项目时非常有用:
postcss: {
plugins: [...], // list of plugins
options: {
parser: sugarss // use sugarss parser
}
}
独立的 CSS 文件
为了确保一致的提取和处理,建议在根组件App.vue
中引入全局的、独立的样式文件,例如:
<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>
注意,你可能只需要为你自己编写的应用程序编写样式。在那些存在的样式库,如Bootstrap 或 Semantic UI,你可以在 /static
文件夹中放置他们并且直接在index.html
文件中引入。这样做会避免额外的构建时间,也更好的利用浏览器的缓存。(请参考处理静态资源)
4 环境变量
有时需要根据程序运行环境的不同而有不同的配置值。如
// config/prod.env.js 生产环境
module.exports = {
NODE_ENV: '"production"', //字符串变量需要包成单引号和双引号 '"..."'
DEBUG_MODE: false,
API_KEY: '"..."' // 这是所有环境之间共享的
}
// config/dev.env.js 开发环境
module.exports = merge(prodEnv, { // 继承自 prod.env .(通过merge)
NODE_ENV: '"development"',
DEBUG_MODE: true // 会覆盖prod.env中的debug_mode值
})
// config/test.env.js 测试环境
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
})
用法
在代码中使用环境变量很简单。例如:
Vue.config.debug = process.env.DEBUG_MODE
Vue-cli webpack模板的更多相关文章
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- VUE知识day3_vue-cli脚手架安装和webpack模板项目生成
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- 03慕课网《vue.js2.5入门》——Vue-cli的安装,创建webpack模板项目
安装Vue-cli 第一种 貌似不可以,然后用了第二种,但是重装系统后,第二种不能用了,用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创 ...
- axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器
1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...
- vue cli 3 & webpack-merge & webpack 3 & bug
vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
随机推荐
- MySQL根据表字段生成C#Model语句
USE INFORMATION_SCHEMA;SELECT CONCAT('/// <summary>\r\n/// ',COLUMN_COMMENT,'\r\n/// </summ ...
- hibernate的一些缺陷(转)
例如用户在系统中,保存的信息包括简要信息(用户名.联系电话.Email.性别)和一些图像信息(照片). 但是在系统设计时,我的设计方式都是遵循业务的需要,设计一个“用户”类,包含用户名. ...
- PHPCMS v9 二次开发_验证码结合Session开发
本文主要讲解了在V9中使用v9自带验证码并且需要使用session的情况下,多种问题的解决.:).如有问题或者更好的解决办法,希望不吝赐教. 1.前端调用验证码 pc_base::load_sys_c ...
- 20181009-7 选题 Scrum立会报告+燃尽图 06
Scrum立会报告+燃尽图(06)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2196 一.小组介绍 组长:刘莹莹 ...
- SOA实践指南-读书笔记
SOA是英文Service-Oriented Architecture,即面向服务架构的缩写. SOA是一种范式,目的是增强灵活性.SOA很适宜处理复杂的分布式系统. SOA方法接受异质(不同的平台, ...
- (转)Web系统大规模并发——电商秒杀与抢购
电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...
- 解决Eclipse中新创建的Maven项目不自动创建web.xml文件
1. 通过J2EE tools 2.项目右键-properties-project facets-勾选dynamic web moudle
- HDU 2154:跳舞毯
跳舞毯 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- Visual Studio 2005 自带单元测试
一 单元测试简介 单元测试是代码正确性验证的最重要的工具,也是系统测试当中最重要的环节.也是唯一需要编写代码才能进行测试的一种测试方法.在标准的开发过程中,单元测试的代码与实际程序的代码具有同等的 ...
- hadoop之 Hadoop1.x和Hadoop2.x构成对比
Hadoop1.x构成: HDFS.MapReduce(资源管理和任务调度):运行时环境为JobTracker和TaskTracker: Hadoop2.0构成:HDFS.MapReduce/其他 ...