一丶項目配置

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'

./webpack.config.js //配置文件

配置webpack和webpack-dev-server,也可通過vcode插件
配置vue-loader,
配置 less-loader
配置vue別名

//引入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頁面就能夠實時更新啦!!

總結

以上所述是小編給大家介紹的Vue起步(無cli)教程詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！