stylus vue 报错_带你玩转webpack 从零构建Vue工程

从零搭建Vue开发环境：webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig

从2009到2019社会在不断进步技术也在不断进步我们当然也不能落后

“不积跬步无以至千里，不积小流无以成江海”

先开始webpack基本构建

创建一个工程目录 vue-structure

mkdir vue-structure && cd vue-structure

安装webpack

npm i webpack webpack-cli -D

创建build目录

mkdir build

在build目录里, 创建webpack.config.js

cd build && touch webpack.config.js

创建入口文件 src/main.js

mkdir src

cd src && touch main.js

main.js

alert('hello world!')

配置npm scripts

// package.json   "scripts": {    "build": "webpack --config build/webpack.config.js --progress --mode production"  }

配置devServer

npm i webpack-dev-server -D

配置npm scripts

"scripts": {    ...    "dev": "webpack-dev-server --config build/webpack.config.js --progress --mode development"  }

html 插件

npm i html-webpack-plugin -D

webpack配置

// build/webpack.config.js

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')

const resolve = dir => path.join(__dirname, '..', dir)

module.exports = {  entry: resolve('src/main.js'),  output: {    filename: '[name].[hash:5].js',    path: resolve('dist')  },  devServer: {    host: '0.0.0.0',    port: 7000,    open: true  },  plugins: [    new HtmlWebpackPlugin({      template: resolve('index.html')    })  ]}

运行webpack dev server

npm run dev

浏览器自动打开 http://0.0.0.0:7000/

到这里webpack开发服务基本跑通了。

配置babel v7

webpack 4.x | babel-loader 8.x | babel 7.x

npm i -D babel-loader @babel/core @babel/preset-env

babel plugin

支持动态import()

npm i @babel/plugin-syntax-dynamic-import -D

配置webpack.config.js

module: {    rules: [      {        test: /\.js$/,        use: 'babel-loader',        exclude: /node_modules/      }    ]  }

创建.babelrc文件

{  "plugins": [    "@babel/plugin-syntax-dynamic-import"  ],  "presets": [    [      "@babel/preset-env",      {        "modules": false      }    ]  ]}

测试下ES6代码

test.js

 // src/test.js  export default () => alert('hello vue!')

index.html

// src/index.html  <body>    <div id="app">请说saydiv>  body>

main.js

// src/main.js document.querySelector('#app').addEventListener('click', () => {  import('./test.js').then(res => {    res.default()  })})

运行下dev

npm run dev

点击页面div

ok 没问题。

配置Vue Loader

Vue Loader 是什么？

Vue Loader 是一个 webpack 的 loader，它允许你以一种以单文件组件(*.vue文件) 的格式撰写 Vue 组件

创建App.vue根组件

<template>  <div class="example">{{ msg }}div>template>

<script>export default {  data () {return {msg: 'Hello Vue!'    }  }}script>

<style>.example {color: red;}style>

安装Vue

npm i vue

src/main.js

import Vue from 'vue'import App from './App.vue'

new Vue({  render: h => h(App)}).$mount('#app')

修改index.html

<body>  <div id="app">div>body>

运行dev

npm run dev

结果报错了。

webpack默认只能识别JavaScript文件，不能解析.vue文件(vue单文件组件是Vue独有的)，于是作者提供了vue-loader。

Vue单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

配置vue-loader

npm i vue-loader vue-template-compiler

vue-template-compiler (peer dependency) 是vue-loader的同版本依赖

webpack.config.js

// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {  module: {    rules: [      // ... 其它规则      {        test: /\.vue$/,        loader: 'vue-loader'      }    ]  },  plugins: [    // 请确保引入这个插件！    new VueLoaderPlugin()  ]}

vue单文件组件中css 也需要css-loader解析

npm i css-loader -D

配置webpack

// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {  mode: 'development',  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue-loader'      },      // 它会应用到普通的 `.js` 文件      // 以及 `.vue` 文件中的 `

stylus vue 报错_带你玩转webpack 从零构建Vue工程相关推荐

webstorm里stylus代码报错_发生甚莫事了？我的程序为啥又报错了！
点击上方Python知识圈,设为星标回复100获取100题PDF 阅读文本大概需要 6 分钟近期精彩文章:Python100例(附PDF下载地址) 作者:pk哥原创公众号:Python知识圈刚 ...
stylus vue 报错_【Vue】Re01 理论概念和入门上手
一.Vue概述什么是渐进式?1.把Vue作应用的一部分嵌套项目中2.如果完全抛弃其他组件和框架,Vue又具有丰富的生态和库莱支持3.Core + Router + VueX 满足项目绝大多数的需求- ...
Vue报错：Error while running task D:\vue\forum:build with message‘spawn vue-cli-service ENOENT‘
Vue报错:Error while running task D:\vue\vueforum\forum:build with message'spawn vue-cli-service ENOENT ...
vue 报错unknown custom element解决方法
vue 报错unknown custom element解决方法参考文章: (1)vue 报错unknown custom element解决方法 (2)https://www.cnblogs.co ...
vue 报错 Cannot read property ‘__ob__‘ of undefined的解决方法
vue 报错 Cannot read property '__ob__' of undefined的解决方法参考文章: (1)vue 报错 Cannot read property '__ob__' ...
vue报错：error Strings must use singlequote quotes 字符串必须使用单引号
例出现下面报错这个问题说明必须使用单引号,在vue的项目开发中,如果我们在通过vue-cli脚手架构建项目的时候使用了Eslint严格模式,那么对于字符串类型的数据String必须要使用单引号,不能 ...
Vue报错：Unknown custom element: router-view - did you register the component correctly页面中不显示链接
Vue报错:Unknown custom element: router-view - did you register the component correctly vue-router应用到组件 ...
Vue报错：sockjs.js?9be2:1627 GET http://192.168.43.88:8080/sockjs-node/info?t=1631603986586 net::ERR_CO
Vue报错:sockjs.js?9be2:1627 GET http://192.168.43.88:8080/sockjs-node/info?t=1631603986586 net::ERR_CO ...
Vue报错：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
Vue报错:'vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件. 出现的问题解决办法错误提示了是因为没有node_modules.直接执行以下命令 npm i ...
Vue报错：3 errors and 0 warnings potentially fixable with the `--fix` option.
Vue报错:3 errors and 0 warnings potentially fixable with the --fix option. 报错如下解决办法注释掉.eslintrc.js文件 ...

stylus vue 报错_带你玩转webpack 从零构建Vue工程

stylus vue 报错_带你玩转webpack 从零构建Vue工程相关推荐

最新文章

热门文章