Vue+Node+MongoDB 상점 시스템 구현

제1장 틀 및 도학
1.1 Vue 및 React 프레임워크 비교
Vue와react에 비해angular는 완전한 프로젝트 해결 방안과 같고 구조 자체도 비교적 크기 때문에 여기서 토론하지 않겠습니다.
Vue: - 템플릿과 렌더링 함수의 탄력적인 선택 - 간단한 문법 및 프로젝트 창설 - 더 빠른 렌더링 속도와 더 작은 부피 React: - 대형 응용 프로그램과 테스트 가능성에 더욱 적합- 웹 쪽과 원본 App - 더 큰 생태권에 대한 더 많은 지원과 도구 공통점: - 가상 DOM을 이용하여 빠른 렌더링을 실현(vue2.0에서virtual dom 사용) - 경량급 - 응답식 구성 요소(페이지가 바뀐 후 구성 요소가 실시간으로 변화) - 서버 쪽 렌더링 지원, ssr - 통합 루트 도구, 패키지 도구 및 상태 관리 도구 - 우수한 지원 및 커뮤니티 설명: Vue 핵심 사상: 데이터 구동, 상태 관리, 구성 요소화
1.2 Vue 양방향 귀속의 실현
핵심: Object.defineProperty().속성의 get, set 함수를 설정하여 동적 값을 설정합니다.속성에 get, set을 설정하면 속성을 수정하면 자동으로 set을 터치하고 값을 가져오면 get을 터치합니다

<body>
    <input id='inputVal' type='text'>
    <div id='showVal'>div>
    <script type="text/javascript">
          //1、    
        var obj = {};
        Object.defineProperty(obj,'userName',{
            get:function(){
                console.log()
            },
            set: function(newValue){
                document.getElementById('userName').value = newValue
                document.getElementById('uName').innerText = newValue
            }
        })
        //           
        document.getElementById('userName').addEventListener('keyup',function(event){
            obj.userName = event.target.value
        })
    script>
body>

1.3 과정 지도

항목 포함 기능: 상품 목록, 카트, 주소, 결제, 주문 및 로그인 모듈

프로젝트 기술 스택: 전면 Vue 풀백 및 ES6, 후면 Node+Express, DB용 MongoDB

과정배정: 1, 2장:vue기초지식;3.4장 VueRouter,axios,vureResource;5장: ES6 상용 문법;6-14장 상점 프로젝트 개발;15장 vuex는 상점 로그인, 쇼핑 카트 수량 등 기능을 실현한다.16장 웹팩 사용;17장 온라인 배포

제2장 환경 설정
2.1 node 및 npm 환경
window에서 node를 직접 다운로드 (npm 첨부)
2.2 vue 환경
1. 다중 페이지 응용: 페이지에서\
2.3 Vue 구성
디렉토리 구조

|-- build
|--  |-- *.js
|-- config
|-- |-- *.js
|-- src
|-- | -- App.vue
        main.js
        assests
        component
        router
|--static
|-- .babelrc
|-- .gitignoor
|-- .postCssrc.js
|-- index.html
|--  package.json
|--  README.md

1. build 파일
프로젝트 패키지 및 프로필 저장 디렉터리
1、webpack.base.conf.js 핵심 관심
2、build.js: 웹 패키지와 index를 불러옵니다.js, 패키지

require('./check-versions')() //      ，     

process.env.NODE_ENV = 'production' //       

var ora = require('ora') //    
var rm = require('rimraf') //    
var path = require('path') //node       
var chalk = require('chalk') //             
var webpack = require('webpack') //webpack    
var config = require('../config') //../config/index.js    （        ）
var webpackConfig = require('./webpack.prod.conf') //      

var spinner = ora('building for production...') //    
spinner.start() //  loading  

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '

')

    console.log(chalk.cyan('  Build complete.
'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.
' +
      '  Opening index.html over file:// won\'t work.
'
    ))
  })
})

dev-client.js 핫 리셋 파일 설정
dev-server.js가 node express를 통해 시작하는 서비스 - opn: 자동으로 열리는 플러그인 - express: node 서비스 플러그인 - 웹 패키지: 웹 패키지 패키지 패키지 플러그인 - proxy Middleware: 프록시 중간부품 플러그인
2. config 파일
프로젝트 웹팩 프로필 저장 디렉터리
index.js 핵심 관심
src
프로젝트 소스 파일
4. static
정적 자원 디렉토리

Vue+Node+MongoDB 상점 시스템 구현 - 1, 2장: 기초 설정

좋은 웹페이지 즐겨찾기