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>'dev':'webpack-dev-server'./webpack.config.js/설정 파일웹 팩 과 웹 팩-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>지금 은 wepack-dev-server 를 시작 하 였 습 니 다.127.0.0.1:8080 페이지 를 실시 간 으로 업데이트 할 수 있 습 니 다!!
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 걸음 마(cli 없 음)튜 토리 얼 에 대한 상세 한 설명 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
