Vue.js+Webpack+Sass+Jade(pug)网站构建
2017-07-13 16:50
681 查看
1. 前情提要
简介摘抄
(1) Vue.js
Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。【官网】 https://vuejs.org/
(2) Webpack
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
【官网】https://webpack.js.org/
【中文网】https://doc.webpack-china.org/
(3) Sass
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。【官网】http://sass-lang.com/
【中文网】https://www.sass.hk
(4) Jade(pug)
Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用。注:Jade已更名为pug,但jade之前的版本依旧可以使用
【pug官网】https://pugjs.org
【jade中文教程】https://segmentfault.com/a/1190000000357534#articleHeader18
2. Pre-work
通过命令行note -v可以查看node.js的版本号。
Vue.js需要Node版本在4.0.0以上,详见之前的博文 Vue.js入门 - 安装
3. 搭建
搭建过程请参照 Vue.js入门 - 安装中的步骤:全局安装 vue-cli
创建一个基于 webpack 模板的新项目
安装依赖
运行
4. 扩展Sass和Jade(Pug)
由于习惯于用jade,在实际构建中,我并未安装pug。读者可根据实际情况,选择pug或者jade安装。(1) 安装依赖
【Pug】npm install pug pug-loader pug-filters -D
【Jade】
npm install jade jade-loader -D
【Sass】
npm install sass sass-loader node-sass -D
(2) 修改config
在工程目录下找到build文件夹,打开
webpack.base.conf.js文件。
加入以下配置:
{ test: /\.sass$/, loader: 'style!css!sass?sourceMap' }, { test: /\.jade$/, loader: "jade" }, { test: /\.pug$/, loader: 'pug' },
(3) 测试
工程目录下src -> components -> Hello.vue 修改为<!------html-------> <!--加上【lang="jade"】属性--> <template lang="jade"> div.hello h1 hello p {{msg}} </template> <!------js-------> <script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!------css-------> <!--加上【lang='sass'】属性--> <style lang='sass'> h1 color: red </style>
5. 番外
Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法按照上文es6还是要报错,需根据下文定义type="es6"
webstorm中es6语法报错,.vue文件中es6语法报错
依旧未解决sass显示问题,scss没问题
相关文章推荐
- Window10 下部署Webpack+Vuejs构建前端环境(1)
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- webpack---webpack构建vue多页面框架(二、webpak.config.js)
- webpack+vue 构建项目步骤并且使用sass 安装配置
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(一)环境安装
- windows下vue-cli及webpack 构建网站(一)环境安装
- webpack+vue.js实现组件化详解
- 用Webpack构建Vue
- Vue.js+webpack+node.js实现价格监测应用Ponitor
- 初始化nodejs+webpack+vuejs
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue+webpack学习案例(一)-构建Vue项目
- 基于vuejs+webpack的日期选择插件
- 基于vue.js和webpack的Chat示例
- vue webpack 构建