add: vue-single component page

yinsang · Sep 13, 2018 · 9d84c1c · 9d84c1c
1 parent 579bf3b
commit 9d84c1c
Show file tree

Hide file tree

Showing 8 changed files with 6,127 additions and 129 deletions.
diff --git a/vue-webpack/index.html b/vue-webpack/index.html
@@ -9,6 +9,6 @@
 <body>
   <h2>single-file-components</h2>
   <div id="app">{{value}}</div>
-  <script src="./index.bundle.js"></script>
+  <script src="./dist/main.js"></script>
 </body>
 </html>
diff --git a/vue-webpack/package-lock.json b/vue-webpack/package-lock.json
diff --git a/vue-webpack/package.json b/vue-webpack/package.json
@@ -4,11 +4,24 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --config webpack.dev.config.js"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "vue-loader": "^15.4.1"
+    "vue-loader": "^15.4.1",
+    "webpack": "^4.17.2",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.8",
+    "webpack-merge": "^4.1.4"
+  },
+  "dependencies": {
+    "css-loader": "^1.0.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "style-loader": "^0.23.0",
+    "vue": "^2.5.17",
+    "vue-template-compiler": "^2.5.17"
   }
 }
diff --git a/vue-webpack/readme.md b/vue-webpack/readme.md
@@ -0,0 +1,8 @@
+# single-file-components  vue单文件组件
+`npm i`
+## webpack 配置已完成打包工作
+`webpack`
+# webpack-dev-server可以用npm run dev打开
+`npm run dev`
+为了引入方便 dev生成的/dist/main.js 和webpack build的main.js 放在一个文件夹。
+dev生成的main.js 其实在内存中，不在文件中显示
diff --git a/vue-webpack/src/app.vue b/vue-webpack/src/app.vue
@@ -1,19 +1,34 @@
 <template>
-  <div class="box">
-    <div class="desc">this is a single template component</div>
+  <div class="container">
+      <div class="ab absolute1"></div>
+      <div class="ab absolute2"></div>
   </div>
 </template>
 <script>
+import Vue from 'vue'
 export default {
-  
+  name:'cpui-demo',
 }
 </script>
-<style lang="less" scoped>
-.box{
-  .desc{
-    box-shadow: 1px solid red 10px;
-  }
-}
+<style lang="less">
+    .container{
+        position: relative;
+        color:blue;
+    }
+    .ab{
+        position:absolute;
+        width: 100px;
+        height:100px;
+        top:0;
+        left:0;
+    }
+    .absolute1{
+        left:60px;
+        background: red;
+        z-index: 1;
+    }
+    .absolute2{
+        background: yellow;
+        z-index: 9;
+    }
 </style>
-
-
diff --git a/vue-webpack/src/index.js b/vue-webpack/src/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import App from './app'
+import App from './app.vue'
 new Vue({
   el:'#app',
   render:h=>h(App)

diff --git a/vue-webpack/webpack.config.js b/vue-webpack/webpack.config.js
@@ -1,14 +1,22 @@
+const {VueLoaderPlugin} = require('vue-loader')
 module.exports = {
-  resolve:{
-    extensions:['.vue']
-  },
   module: {
     rules: [
       {
         test: /\.vue$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'vue-loader'
-      }
+      },
+      {
+        test: /\.less$/,
+        exclude: /(node_modules|bower_components)/,
+        use:[
+          'style-loader','css-loader', 'less-loader'
+        ]
+      },
     ]
-  }
+  },
+  plugins:[
+    new VueLoaderPlugin()
+  ]
 }
diff --git a/vue-webpack/webpack.dev.config.js b/vue-webpack/webpack.dev.config.js
@@ -0,0 +1,10 @@
+const merge = require('webpack-merge')
+const webpackBase = require('./webpack.config')
+const path = require('path');
+
+module.exports = merge(webpackBase, {
+  mode:'development',
+  output:{
+    filename: 'dist/main.js',
+  }
+})