개발의 한 가지 소감

소감을 말하다
학원에서 소프트웨어 디자인 취미반을 개설했는데 스스로 웹 페이지를 만들어야 합니다. 선생님께서 추천하신 것은vue입니다.js 프레임워크로 개발했기 때문에 vue를 시도했습니다.js+element-ui+node.js 방식으로 전방 페이지를 일시적으로 개발합니다.
1. 우선 node를 설치한다.js, 전기 개발은 백엔드를 빌리지 않고 달려야 하기 때문에 node를 사용합니다.js에서 테스트를 진행합니다.(이때 cmd에 명령node -v을 입력하여 설치가 성공했는지 확인할 수 있습니다.2.다음은 vue를 설치합니다.js, node가 설치되어 있기 때문에.js 후 node를 사용할 수 있습니다.js가 자체로 가지고 있는 npm(Nodejs의 패키지 관리자입니다. 국내에서 npm를 사용하면 느리기 때문에 타오바오 NPM 렌즈를 추천합니다.http://npm.taobao.org/npm을 국내에서 사용하면 자원 문제가 있을 수 있으므로 cnpm, cmd를 사용하여 명령을 입력해야 합니다npm install -g cnpm --registry=https://registry.npm.taobao.org
4, vue 비계 설치, npm install -g vue-cli, (vue-cli: 사용자 생성 Vue 프로젝트 템플릿)
5, 이후 기본적인 개발 환경은 잘 되어도 현재 vue-cli를 사용할 수 있습니다. 먼저 프로젝트를 만들고 싶은 디렉터리를 찾습니다(그리고 cmd 실행 명령

vue init webpack firstVue 

(webpack: 주요 용도는CommonJS의 문법을 통해 모든 브라우저에서 발표해야 하는 정적 자원을 상응하는 준비를 하는 것이다. 예를 들어 자원의 합병과 포장이다.)
프로젝트를 초기화하는 것입니다. 이 프로젝트는 구축 도구인 웹 패키지를 기반으로 합니다.6, 설치 의존, 프로젝트 폴더에 들어가면 cmd 실행 명령cnpm install을 실행하고 설치를 기다립니다. 설치가 완료되면 의존 패키지를 전문적으로 저장하는 파일 추가, nodemodules 7,npm run dev 이것은 실행 코드이고 그 중의 "run"은 패키지입니다.json 파일에서,scripts 필드의 dev, 즉 nodebuild/dev-server입니다.js 명령의 단축키
그리고 vscode에 설정해야 편집이 용이합니다.
1, 우선 vscode를 설치하고, 이것이 바로 다운로드하고 바보식으로 설치하면 됩니다.2, 파일 -> 기본 설정 -> 설정 (이 때 설정 파일이 아닌 경우 오른쪽 상단에 있는 설정 json 열기 단추를 누르십시오. 다음 설정은 다음과 같습니다.

{
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 20,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css/",
    "background.customImages": [
        "file:///D://222.png"
    ],
    "background.useDefault": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "102%",
        "height": "100%",
        "background-position": "0%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "cssrem.rootFontSize": 12,
    "cssrem.autoRemovePrefixZero": false,
    "cssrem.fixedDigits": 3,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "vue",
            "html"
            
        ]
    },
    "workbench.colorTheme": "Dark-Dracula",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
    // "emmet.syntaxProfiles":{
    //     "vue-html":"html",
    //     "vue":"html"
    // },
    // "files.associations": {
    //     "*.vue":"html"
    // },
    // "eslint.validate":["javascript","javascriptreact","html"]
}

여기까지 환경이 많이 안 맞아도 마지막 단계만 남았어요. 요소를 프로젝트에 넣고,
1. 프로젝트 파일에 들어가고 cmd 운행cnpm i element-ui -S, 설치를 기다리고 설치가 완료된 후main.js 아래 추가import ElementUI from 'element-ui'Vue.use(ElementUI)
2, 그리고 npm run dev 실행하면 오류가 발생할 수 있습니다. 그러면 config 아래의 index를 직접 입력하십시오.js의 useEslint: true가false로 변경됨