Vue起步(無cli)

雜草叢生發表於2019-04-07
Vue

一丶專案配置

1. 建立身份證檔案

2. 安裝webpack webpack-cli webpack-dev-server(全域性)工具

3. 安裝,配置vue vue-loader vue-template-compiler less-loader css-loader style-loader less

4. 構建專案目錄,更改配置檔案

  • ./index.html //頁面檔案
    <div id="app"></div>
    <script src="dist/bundle.js"></script>
複製程式碼
  • ./package.json //身份證檔案
'dev':'webpack-dev-server'
複製程式碼
//引入node的path路徑元件和vueloader外掛
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  //工作模式
  mode: 'development',
  //入口
  entry: path.resolve("./app/main.js"),
  //出口
  output: {
    publicPath:'dist',
    filename:"bundle.js"
  },
  module: {
  //配置loader
    rules: [{
      test: /.jsx?$/,
      include: [
        path.resolve(__dirname, 'app')
      ],
      exclude: [
        path.resolve(__dirname, 'node_modules')
      ],
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.less$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'less-loader'
      ]
    }
  ]
  },
  //雜項
  resolve: {
  //省略檔案格式
    extensions: ['.json', '.js', '.jsx','vue']
  },
  plugins: [
  //使用vueloader外掛
    new VueLoaderPlugin()
  ]
};
複製程式碼
  • ./App/main.js //入口檔案
import Vue from "vue";
import App from "./app.vue";
new Vue({
    el:"#app",
    render(h){
        return h(App)
    }
})
複製程式碼
  • ./App/app.vue //根元件
<template>
    <div>
        Hello World
    </div>
</template>
<script>
    export default {
    }
</script>
<style scoped>
</style>
複製程式碼

5.cmd 中 npm run dev 跑一下

現在就已經啟動wepack-dev-server了,127.0.0.1:8080頁面就能夠實時更新啦!!
接下來就可以開發專案了

相關文章