Vue起步(無cli)的啊教程詳解
一丶項(xiàng)目配置
1. 創(chuàng)建身份證文件
2. 安裝webpack webpack-cli webpack-dev-server(全局)工具
3. 安裝,配置vue vue-loader vue-template-compiler less-loader css-loader style-loader less
4. 構(gòu)建項(xiàng)目目錄,更改配置文件
./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'
]
}
]
},
//雜項(xiàng)
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 跑一下
現(xiàn)在就已經(jīng)啟動wepack-dev-server了,127.0.0.1:8080頁面就能夠?qū)崟r更新啦!!
總結(jié)
以上所述是小編給大家介紹的Vue起步(無cli)教程詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
vue項(xiàng)目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項(xiàng)目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家介紹了vue3 diff 的算法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue滑塊驗(yàn)證碼組件anji-captcha的使用案例詳解
滑塊驗(yàn)證是一種常見的人機(jī)識別方法，這篇文章主要介紹了Vue滑塊驗(yàn)證碼組件anji-captcha的使用,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue動態(tài)菜單、動態(tài)路由加載以及刷新踩坑實(shí)戰(zhàn)
這篇文章主要給大家介紹了關(guān)于vue動態(tài)菜單、動態(tài)路由加載以及刷新踩坑的相關(guān)資料,踩的這些坑其實(shí)是挺常見的,大家可以看看,避免遇到的時候再踩到同樣的坑,需要的朋友可以參考下2021-10-10
Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
這篇文章主要介紹了Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vuejs中的watch實(shí)例詳解(監(jiān)聽者)
本文通過實(shí)例代碼給大家介紹了Vuejs中的watch，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2020-01-01
基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
mpvue從底層支持 Vue.js 語法和構(gòu)建工具體系，同時再結(jié)合相關(guān)UI組件庫，便可以高效的實(shí)現(xiàn)小程序開發(fā)。這篇文章主要介紹了基于mpvue搭建小程序項(xiàng)目框架 ,需要的朋友可以參考下2019-04-04
vue-baidu-map 進(jìn)入頁面自動定位的解決方案(推薦)
這篇文章主要介紹了vue-baidu-map 進(jìn)入頁面自動定位的解決方案,需要的朋友可以參考下2018-04-04
Vue結(jié)合Video.js播放m3u8視頻流的方法示例
本篇文章主要介紹了Vue+Video.js播放m3u8視頻流的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05