이 글은 주로 참고할 가치가 있는 Vue 스캐폴딩의 간단한 사용법을 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

미리 선언하세요

참고: 저는 많은 이해와 이해를 갖고 있습니다. Vue 스캐폴딩. 사물과 이해는 모두 전문적이고 공식적인 것이 아닌 비유적인 기술입니다.

webpack

은 CSS와 JS를 하나의 파일로 압축할 수 있는 프로젝트 구축 도구입니다. 또한, 테스트 서버도 제공될 수 있습니다. webpack을 사용할 때 일부기본 확장자및경로 별칭을 구성하여 프로젝트 파일에서 직접

import 및 내보내기

를 사용할 수 있습니다.export명령을 사용하여 JS 개체 및 기타 항목을 내보낼 수 있습니다. JS 파일은경로에서 개체 이름 가져오기형식을 사용하여 이 개체를 가져와서 사용할 수 있지만 가져올 때는 가져오기 및 내보내기 개체의 이름을 알아야 합니다.export default명령을 사용하여 객체를 내보내는 경우 다른 JS 파일을 가져올 때 내보낸 객체의 이름을 알 필요가 없습니다. 객체 이름을 사용자 정의할 수 있습니다export命令可以将一个JS对象导出，其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用，但是在导入时，必须知道导入导出对象的名字。如果使用export default命令导出对象的话，其他JS文件在导入时就无需知道导出对象的名字，可以自定义对象名

ps：export和import为es6规范中的关键字，目前仅被少量JS运行平台实现，在脚手架里会被自动用babel转换成es5对应语法

组件中自定义标签名的大小写问题

在大多数浏览器解析HTML时，不区分标签的大小写。自定义标签中的大写字母会被自动转换为小写字母，如会被转换为 first 标签，因此导致与注册时提供的标签名不一致，出现组件未正确注册的错误。

如果使用自定义组件时，代码写在template标签里，在解析时就会被当做JS解析，是区分大小写的。

组件的另外一种写法

使用脚手架创建项目

安装NodeJS

脚手架的安装及运行均依赖NodeJS，可以在命令行键入node -v来查看是否安装NodeJS。

下载NodeJS

配置npm全局路径

npm config set prefix "D:nodejsnode_global"
npm config set cache "D:nodejsnode_cache"
之后将第一个路径同时配置到环境变量path中。

配置淘宝npm镜像

npm config set registry https://registry.npm.taobao.org

安装vue-cli

在命令行中执行npm install -g vue-cli。

创建模板项目

//vue init 模板名 项目名 vue init webpack simple

模板名可以在 https://github.com/vuejs-temp... 查看，推荐使用webpack。

之后使用cd 项目名进入项目根目录，使用npm install来自动安装项目依赖。

其他常用命令

项目根目录下执行npm run dev可以测试运行项目，执行npm run build可以正式编译项目到dist目录下。

目录结构

单文件组件

补充：在Vue脚手架中使用jquery和其他框架

在项目根目录安装jquerynpm install jquery

ps:export및import는 es6 사양의 키워드입니다. 현재 소수의 JS 실행 플랫폼에서만 구현되며 스캐폴딩에서는 자동으로 변환됩니다. babel을 사용한 es5 해당 구문.

대부분의 브라우저는 HTML을 구문 분석할 때 태그의 대소문자를 구분하지 않습니다. 사용자 정의 태그의 대문자는 자동으로 소문자로 변환됩니다. 예를 들어는 첫 번째 태그로 변환되므로 등록 시 제공한 태그 이름과 불일치가 발생합니다. .구성요소가 올바르게 등록되지 않은 오류가 발생했습니다.
사용자 정의 구성 요소를 사용하고 코드가 템플릿 태그에 작성된 경우 구문 분석 중에 JS로 구문 분석되며 대소문자를 구분합니다.

컴포넌트를 작성하는 또 다른 방법

const webpack = require("webpack")

스캐폴딩을 사용하여 프로젝트 만들기

NodeJS 설치스캐폴딩의 설치와 운영은 모두 NodeJS에 의존합니다.node -v명령을 사용하여 NodeJS가 설치되어 있는지 확인할 수 있습니다.

npm 전역 경로 구성
npm config set prefix "D:nodejsnode_global"

plugins: [ new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]

위 내용은 Vue 스캐폴딩의 간단한 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!