搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境

一、开发环境配置

开始之前，假设你已经安装了最新版本的 node 和 npm。

全局安装 vue-cli 和 webpack :

npm install vue-cli webpack -g

创建工程；工程名字不能用中文，英文也建议小写。

vue init webpack 项目名

按照步骤一步一步执行，需要你添加 Project name，Project description，Author.

然后使用 npm install 安装官方库。

然后使用npm run dev运行我们的项目后浏览器会自动弹出，并展示以下页面。

可以根据页面给我们的这八个链接获得我们想要的学习资源。

接下来安装Vue全家桶。

npm install vue-router vue-resource vuex --save

如下修改src/main.js ：

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'import App from './App.vue'Vue.use(VueResource)
Vue.use(VueRouter)
Vue.use(Vuex)new Vue({el: '#app',render: h => h(App)
})

安装html模板语言pug(jade)

npm install pug pug-loader pug-filters --save

安装css 预编译语言stylus

npm install style-loader stylus stylus-loader --save# 或者你习惯用sass或less # npm install style-loader node-sass sass-loader --save # npm install style-loader less less-loader --save

打开webpack.config.js，配置loader：

module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {loaders: {}// other vue-loader options go here
        }},{test: /\.pug$/,loader: 'vue-html!pug-html'},{test: /\.styl/,loader: "style-loader!css-loader!stylus-loader"},
...

生成html文件,安装插件` html-webpack-plugin `。

npm install html-webpack-plugin --save

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/build.js',},...plugins: [new HtmlWebpackPlugin({title: 'Charles 的个人主页',filename: 'index.html', //生成后的文件名，默认为 index.html.template: 'index.html',  //自定义的模板文件inject：'body' //script标签位于html文件的 body 底部
    }),]
}

提取CSS，提取CSS的插件叫`extract-text-webpack-plugin`，这个不是webpack自带的，需要自己安装。

npm install extract-text-webpack-plugin --save

原来的`style-loader`就要修改了，毕竟我们的目标是将CSS提取出来而不是放在head中, 并且vue文件中<style>里的样式也要提取出来。

var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
...module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {loaders: {stylus: ExtractTextPlugin.extract("css-loader!stylus-loader")}}},{test: /\.pug$/,loader: 'vue-html!pug-html'},{test: /\.styl/,loader: ExtractTextPlugin.extract("css-loader!stylus-loader")},
...plugins: [new HtmlWebpackPlugin(),new ExtractTextPlugin("css/style.css")]

转载于:https://www.cnblogs.com/cina33blogs/p/7249364.html

搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境相关推荐

nuxtjs+express+vue2+vuex搭建的服务端渲染（SSR）个人网站项目 1
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992... 项目 ...
基于vue2+vuex+vue-router+sass+webpack的网易云音乐
[本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 这段时间写的一个项目,供给大家互相学习,有什么疑问可以issues我. 源码地址:https://git ...
搭建 vue2 单元测试环境(karma+mocha+webpack3)
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（二）安装 nodejs 环境以及 vue-cli 构建初始项目
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目在上一篇<Vue2+VueRouter2+ ...
2018年最新Mpvue Vue2 Vuex MintUi视频教程网盘分享
版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/82865215 百度网盘链接: https://pan.baidu.c ...
vue2 + vuex 高度还原饿了么 App，用真实数据登陆官网，并实现购物车、下单功能
前言 vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目.虽然写了几个demo,但和写一个完整的项目还是有很大差别的.于是自己想着用空 ...
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（一）基础知识概述
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟 ...
vue2.0---搭建vue的开发环境
vue2.0---搭建vue的开发环境一.NPM 使用介绍测试node是否安装完成 cnpm介绍安装cnpm 如果检测失败出现:***权限问题 Powershell 脚本运行的几种权限: 二.命 ...
vue-cli3搭建项目之webpack配置
vue-cli3搭建项目之webpack配置一.vue.config.js文件 const path = require('path')module.exports = {publicPath: ' ...

搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境

搭建Vue2+Vuex+Webpack+Pug(jade)+Stylus环境相关推荐

最新文章

热门文章