vue2 study
1.0.0
3. webpack-html-plugin 설치
4vue 설치
5webpack-dev-server 핫 업데이트 설치
6바벨 설치
7vue 파일을 처리하기 위해 vue-loader 설치
8라우팅 vue-router2 사용
9.1vuex의 기본 응용
9.2상태 분할
10 컴포넌트화와 컴포넌트 간 가치 전달
11. nodejs+koa2를 사용하여 백그라운드 인터페이스 제공
12. 프런트엔드 크로스 도메인 액세스를 허용하도록 Koa를 설정합니다.
13 axios를 사용하여 백엔드 인터페이스에 액세스
git clone https://github.com/liubin915249126/vue2-study.git
cd vue2-study
安装cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install //安装依赖包
npm start //启动项目
cd 'to/your/path' npm init
글로벌 설치와 프로젝트 내 설치로 구분
npm install webpack -g
npm install webpack --save-dev
const path = require('path');
module.exports = {
entry: './Script/main.js', //项目入口文件
output:{ //输出编译后文件地址及文件名
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
};
컴파일된 파일을 보려면 명령줄에서 webpack 명령을 실행하세요.
npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
...
new HtmlWebpackPlugin({
title:'react 学习',
inject:'body',
filename:'index.html',
template:path.resolve(__dirname, "index.html")
}),
...
]
webpack 명령을 다시 실행하면 추가 index.html 파일이 표시됩니다. 이 파일은 템플릿을 기반으로 생성되며 패키지에서 생성된 js 파일을 자동으로 도입하여 효과를 확인합니다.
npm install vue -save
main.js를 수정합니다.
import Vue from 'vue';
var MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})
index.html 수정:
<div id="main">
<h3>{{message}}</h3>
</div>
webpack 패키징을 실행하고 index.html(패키지 파일)을 실행하면 오류가 보고되며 확인 후 webpack.config.js에 구성됩니다.
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
다시 실행하여 효과를 확인하세요. 
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev
webpack.config.js 구성
...
devServer: {
historyApiFallback: true,
},
...
package.json에서 명령 구성
"start":"webpack-dev-server --hot --inline --progress --open"
npm start를 실행하면 브라우저가 자동으로 페이지를 열어 파일을 변경한 후 실시간으로 업데이트된 페이지를 확인할 수 있습니다.
.vue 파일을 사용하기 전에 먼저 babel을 설치해야 합니다(es6 구문을 es5로 변환).
npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev
npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev
프로젝트 루트 디렉터리에 새 .babelrc 파일 및 구성을 만듭니다.
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
.css, .vue 파일을 처리하려면 로더를 설치하세요.
npm install css-loader style-loader vue-loader vue-html-loader --save-dev
webpack.config.js 구성
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...
구성 및 실행 후 오류 메시지가 나타납니다. 'vue-template-compiler' 모듈을 찾을 수 없습니다. vue-template-compiler 설치
cnpm install vue-template-compiler --save-dev
index.html 수정:
<body>
<div id="main">
<app></app>
</div>
</body>
새로운 src/index.vue를 생성합니다:
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>
main.js 수정
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})
저장 후 npm start를 실행하여 효과를 확인하세요. 
코드를 수정하고 수정된 효과를 확인하세요.
먼저 vue-router를 설치합니다:
npm install vue-router --save
main.js를 수정합니다.
1. APP와 2가지 정도의 컴포넌트를 소개하고, Router 컴포넌트를 Import하고, 하위 컴포넌트인 Child를 소개합니다.
import App from './src/index.vue';
import About from './src/about.vue';
import Child from './src/children.vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)
2. 경로 정의: 중첩된 경로는 하위:[]와 함께 저장되며 하위 구성 요소는 상위 구성 요소에 있습니다.
<router-view></router-view>
렌더링 시 경로는 "/:id"를 통해 매개변수를 정의하고, "/about/123" 링크를 통해 매개변수를 전달하고, 컴포넌트의 {{$route.params.id}}를 통해 매개변수를 얻습니다.
const routes = [
{ path: '/index', component: App },
{ path: '/about/:id', component: About ,children:[
{ path: 'child', component: child}
]}
]
routes 구성을 전달합니다. const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
const app = new Vue({
router
}).$mount('#main')
5. index.html 파일 수정
<div id="main">
<p>
<router-link to="/index">index</router-link>
<router-link to="/about/123">about</router-link>
<router-link to="/about/123/child">child router</router-link>
</p>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
6. 상위 구성 요소 about.vue를 수정한 후 최상위 HTML 태그가 하나만 있을 수 있다는 것을 발견했습니다.
</template>
<div>
<div class="message">{{ msg }}</div>
<div>
<span>传递的参数为：{{ $route.params.id }}</span>
<router-view></router-view>
</div>
</div>
</template>
routes: [
...
{ path: '/a', redirect: '/index' }
]
/a에 액세스하면 /index 값에 해당하는 구성 요소가 점프됩니다.
vue.js로 단일 페이지 애플리케이션을 작성할 때 패키지된 JavaScript 패키지는 매우 커서 페이지 로딩에 영향을 미칩니다. 라우팅의 지연 로딩을 사용하여 이 문제를 최적화할 수 있습니다. 경로 쓰기를 다음으로 변경합니다.
//定义路由
const routes = [
{ path: '/index', component: resolve => require(['./src/index.vue'], resolve) },
{
path: '/about/:id', component: resolve => require(['./src/about.vue'], resolve) ,
children:[
{ path: 'child', component: resolve => require(['./src/children.vue'], resolve)}
]},
{ path: '/a', redirect: '/index' }
]
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
참조: vue-router 렌더링: 
vuex 설치
npm install vuex --save
새 store.js 파일을 만듭니다.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
// 存储状态值
state: {
count:1
},
// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
mutations: {
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
},
// 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
getters: {
},
actions: {
}
})
// 要改变状态值只能通过提交mutations来完成
export default store;
main.js에 저장소를 삽입합니다.
...
//引入store
import store from './store.js'
...
const app = new Vue({
router,
store
}).$mount('#main')
새 count.vue 파일을 만들고 vue-router 사용을 참조하기 위해 count 구성 요소를 가리키는 새 경로를 만듭니다. count.vue 파일:
<template>
<div>
<div>{{$store.state.count}}</div>
<div>
<span @click="increment">increment</span>
<span @click="decrement">decrement</span>
</div>
</div>
</template>
<style>
</style>
<script>
export default {
data(){
return {};
},
methods:{
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
}
}
}
</script>
표현: 
단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 상대적으로 큰 개체에 집중됩니다. 애플리케이션이 매우 복잡해지면 저장소 개체가 상당히 커질 가능성이 있습니다. 위의 문제를 해결하기 위해 Vuex를 사용하면 저장소를 모듈로 분할할 수 있습니다. 각 모듈에는 고유한 상태, 돌연변이, 작업, getter가 있습니다.
새로운 moduleA.js, moduleB.js 생성
그리고 store.js를 수정하세요.
...
import moduleA from './moduleA';
import moduleB from './moduleB';
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
modules:{
moduleA, moduleB //es6的写法，合并模块
}
})
...
구성 요소의 상태에 액세스하려면 해당 구성 요소를 사용해야 합니다.
$store.state.moduleA.count
$store.state.moduleB.Name
표현: 
돌연변이의 상태를 수정하는 방법은 변경되지 않습니다.
컴포넌트는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소로 나타날 수도 있습니다.
구성 요소 A를 작성하는 방법:
<template>
<div class="componentA">
...
</div>
</template>
<script>
export default {
data () {
return {
msg: 'component-A',
}
}
}
</script>
<style>
</style>
구성 요소 B를 작성하는 방법:
<template>
<div class="message" id="componentB">
...
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.component('my-component', {
template: '#componentB ',
data(){
return {
msg: 'component-B',
}
}
})
</script>
<style>
</style>
상위 구성 요소 구성 요소에서 각각 참조하고 매달립니다.
<template>
<div>
<component-A ></component-A>
<component-B></component-B>
</div>
</template>
<script>
import componentA from './component-a.vue';
import componentB from './component-b.vue'
export default {
data () {
return {
}
},
components:{
"component-A":componentA,
"component-B":componentB
}
}
</script>
<style>
</style>
간단한 상위-하위 구성요소 또는 동일한 상위 구성요소에 속하는 형제 구성요소 간의 통신을 위해 vue는 vuex를 사용할 필요가 없습니다.
상위 구성요소:
<component-A :logo="logoMsg"></component-A> //logoMsg是父组件data里的值
하위 구성 요소:
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
...
data(){
}
props:["logo"],
...
상위 구성요소:
<component-A :logo="logoMsg" @toParent="componenta"></component-A>
...
methods:{
componenta:function(data){ //data就是子组件传递过来的值
this.data1 = data
}
}
하위 구성 요소:
methods:{
toParent:function(){
this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数
}
}
표현: 
표현: 
버스.js 파일:
import Vue from 'vue'
export default new Vue()
구성요소 B $emit는 이벤트를 트리거합니다.
import Bus from './bus.js'
...
byBus:function(){
Bus.$emit('byBus',this.byBusData)
}
구성요소 A$on은 이벤트 전달 데이터를 허용합니다.
...
data(){
},
created(){
Bus.$on('byBus',(data)=>{
this.busData = data
})
},
표현: 
npm 설치 koa koa-router --save-dev
루트 디렉터리에 새 server/index.js 파일 index.js를 만듭니다.
const Koa = require('koa');
const router = require('koa-router')();
const app = new Koa();
router.get('/', (ctx, next)=> {
ctx.response.body = '111'
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000,()=>{
console.log('server is start at port 3000')
});
package.json에서 명령을 설정합니다: "server":"node server index.js" 서비스를 시작합니다: npm run server. 반환 값을 보려면 브라우저에서 localhost/3000을 방문합니다.
koa2-cors를 사용하여 도메인 간 설치를 설정합니다. npm install koa2-cors --save-dev
...
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/test') {
return false;
}
return '*';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));
...
Axios를 설치합니다:
npm install axios --save
요청 기능을 캡슐화하려면 루트 디렉터리에 새 server/request.js를 만듭니다. 모든 요청은 요청 기능을 통과하여 통합된 요청 처리를 용이하게 합니다.
import axios from 'axios'
let BASE_URL = 'http1://localhost:3000'
export default function request(data){
let options = {...data}
options.url = `${BASE_URL}${data.url}`
return axios(options)
.then(checkStatus)
.then(parseJSON)
.catch()
}
(pit) axios.defaults.withCredentials = "include" //요청 시 쿠키 가져오기 Axios 요청은 기본적으로 쿠키를 추가하지 않으며 설정해야 합니다. (pit) 요청할 때 쿠키로 쿠키를 설정할 때 크로스 도메인이 허용됩니다. 백엔드를 사용할 수 없습니다. "* "프로토콜 + 도메인 이름 + 포트 요청 데이터 렌더링을 설명하려면: 렌더링
설치: npm i element-ui -S 소개:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
사용법: 사용하기 전에 CSS 및 파일 로더를 구성하고 스타일 로더 및 CSS-로더를 설치합니다.
npm install css-loader style-loader file-loader --save-dev
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
loader: 'file-loader'
},
{
test: /.(png|jpe?g|gif|svg)(?S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
설치하다:
cnpm install less less-loader --save-dev
사용:
<style lang='less'>
.articleWrap{
.articleTop{
color:red;
}
}
</style>
1. 경로 점프 매개변수:
<router-link :to="{ name:'articleinfo',params:{id:index}}"></router-link>
2. 리치 텍스트 편집기 사용: vue2-editor 설치: cnpm install vue2-editor --save 사용: import { VueEditor } from 'vue2-editor'
cross-env 사용: 개발 환경 설치 설정: cnpm install cross-env --save-dev 구성 명령:
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --open",
"build":"cross-env NODE_ENV=production webpack"
웹팩 구성 수정:
if (process.env.NODE_ENV === 'production') {
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
IS_PRODUCTION: true
}),
/*new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
sourceMap: false
}),*/
]);
}
else {
config.plugins = (config.plugins || []).concat([
new webpack.DefinePlugin({
'process.env':
{
'NODE_ENV': JSON.stringify('development'),
},
IS_PRODUCTION: false
}),
]);
}
process.env.NODE_ENV를 통해 프로그램의 현재 환경 변수를 가져옵니다.
