### 1. Classificação modular
#### A. Modularização do lado do navegador
1).
Produtos representativos da AMD (definição de módulo assíncrono, definição de módulo assíncrono) : Require.js
2). CMD (definição de módulo comum, definição geral de módulo)
representante o produto é: Sea.js
#### B. Modularização do lado do
servidor A especificação de modularização do lado do servidor é usar especificações CommonJS:
1). Use exigir para introduzir outros módulos ou pacotes
2). Use exportações ou module.exports para exportar Membros do módulo
3). Um arquivo é um módulo, e cada um tem um escopo independente
#### Modularidade C.ES6 A
especificação de modularização ES6 define:
1). Cada arquivo js é um módulo independente
2). Importar um módulo Os membros usam o import palavra-chave
3). Exponha que os membros do módulo usam a palavra-chave export
Resumo: É recomendável usar a modularização ES6, porque AMD e CMD são limitados ao lado do navegador, enquanto CommonJS é usado do lado do servidor.
A modularidade do ES6 é uma especificação comum no lado do navegador e no lado do servidor.
### 2. Instale o babel no NodeJS
#### A. Instale o babel
Abra o terminal e digite o comando: npm install --save-dev @ babel / core @ babel / cli @ babel / preset-env @ babel / node
instalação Após terminar, digite o comando novamente para instalar: npm install --save @ babel / polyfill
#### B. Crie babel.config.js
Crie o arquivo babel.config.js no diretório do projeto.
Edite o código no arquivo js da seguinte forma:
const presets = [
["@ babel / env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1" } }] ] // Exposure module.exports = {presets} #### C. Criar arquivo index.js Criar arquivo index.js no diretório do projeto como o arquivo de entrada Insira o código js que precisa ser executado em index.js , por exemplo: console. log ("ok"); #### D. Use npx para executar o arquivo Abra o terminal e digite o comando: npx babel-node ./index.js
### 3. Definir importação / exportação padrão
#### A. Padrão de exportação de
exportação padrão { membro A, membro B, … }, como segue: let num = 100; padrão de exportação { num } #### B. Padrão import import recebe o nome de "identificador de módulo", como segue: import test from "./test.js"
Nota: Em um módulo, só é permitido usar o padrão de exportação para expor os membros uma vez para o exterior por padrão. Não escreva vários padrões de exportação.
Se não houver membros expostos em um módulo, outros módulos obterão um objeto vazio ao importar o módulo
### 4. Configurar importação / exportação sob demanda
#### A.
Exportação sob demanda let num = 998;
export let myName = “jack”;
função de exportação fn = function () {console.log (“fn ”)}
#### B. Importar importação sob demanda
{num, fn as printFn, myName} de“ ./test.js ”
// Importar os membros exportados padrão e os membros importados
teste de importação sob demanda , { num, fn as printFn, myName} from "./test.js"
Nota: Um módulo pode ser importado sob demanda ou por padrão, e um módulo pode ser exportado sob demanda ou por padrão
### 5. Importe e execute diretamente a importação do código
"./test2.js";
### 6. O conceito de
webpack webpack é uma ferramenta popular de construção de projetos de front-end que pode resolver a situação atual do desenvolvimento web.
webpack fornece suporte modular, compressão e confusão de código, resolução de problemas de compatibilidade js, otimização de desempenho e outros recursos, o que melhora a eficiência de desenvolvimento e manutenção do projeto
### 7.Uso básico do webpack
#### A. Crie o diretório do projeto e inicialize
Crie o projeto, e abra o terminal onde o projeto está localizado, digite o comando:
npm init -y
#### B. Create a página inicial e o arquivo js
em Crie uma página index.html no diretório do projeto e inicialize a estrutura da página: coloque um ul na página e alguns li
no ul . Crie uma pasta js no diretório do projeto e crie um arquivo index.js na pasta
### #C. Instale o jQuery para
abrir o terminal do diretório do projeto, digite o comando:
npm install jQuery -S
#### D. Importe o jQuery para
abrir o arquivo index.js, escreva o código para import jQuery e implemente a função:
import $ from “jquery”;
$ (function () { $ ("li: odd"). css ("background", "cyan"); $ ("li: odd"). css ("background", "pink"); }) Obs: Neste momento o projeto Haverá erros na operação, pois import $ from "jquery"; este código pertence ao novo código de sintaxe do ES6, pode haver problemas de compatibilidade no navegador, então precisamos do webpack para nos ajudar a resolver este problema. #### E. Instale o webpack 1). Abra o terminal do diretório do projeto e digite o comando: npm install webpack webpack-cli -D
2). Em seguida, no diretório raiz do projeto, crie um arquivo de configuração webpack.config.js para configurar o webpack
Grave o código no arquivo webpack.config.js para a configuração do webpack, como segue:
module.exports = { mode: "development" / / Pode ser definido como desenvolvimento (modo de desenvolvimento), produção (modo de lançamento) } Suplemento: o modo define o modo de compilação do projeto. Se estiver definido para desenvolvimento, significa que o projeto está em fase de desenvolvimento e não será compactado e ofuscado, e a velocidade de empacotamento será mais rápida. Se estiver definido para produção, significa que o projeto está na versão online estágio, e compactação e ofuscação serão realizadas, e a velocidade de empacotamento será mais lenta 3). Adicione o script em execução dev ao arquivo package.json no projeto, como segue: "scripts": { "dev": "webpack " } Observação: os scripts no nó scripts podem ser executados por meio do npm run, como: run terminal command: npm run dev Webpack será iniciado para empacotar o projeto 4). Execute o comando dev para empacotar o projeto e apresentar o Arquivo js gerado pelo empacotamento do projeto na página. Abra o terminal do diretório do projeto e digite o comando: npm run dev. Aguarde até que o webpack seja empacotado e encontre o caminho dist padrão. Importe o arquivo main.js gerado na página html. Navegue pela página para ver o efeito.
### 8 Defina a entrada / saída
empacotada WebPACK no webpack 4.x, o padrão será src / index.js empacotado como a entrada padrão do documento js
default com o pacote dist / main.js como o arquivo js de saída padrão
se não quiser para usar o arquivo js de entrada / saída padrão, podemos definir o arquivo js de entrada / saída alterando webpack.config.js, como segue:
const path = require ("path");
module.exports = { mode: "development" , // Defina a entrada do caminho do arquivo de entrada: path.join (__ dirname, "./ src / xx.js"), // Defina a saída do arquivo de exportação : { // Defina o caminho do caminho: path.join (__ dirname, " ./dist "), // Defina o nome do arquivo filename:" res.js " } } ### 9. Defina o empacotamento automático do webpack. Por padrão, alteramos o código do arquivo js de entrada e precisamos execute novamente o comando para empacotar o webpack para gerar o arquivo export js. Portanto, você deve reexecutar o empacotamento do comando todas as vezes, o que é uma coisa muito complicada, então o empacotamento automático pode resolver essas operações incômodas. As etapas para realizar a função de empacotamento automático são as seguintes: A. Instale o pacote de função de empacotamento automático: webpack-dev-server
npm install webpack-dev-server -D
B. Modifique a instrução dev em package.json da seguinte maneira:
"scripts": { "dev": "webpack-dev-server" } C. Altere o caminho do arquivo js importado para : D. Execute npm run dev para o pacote E. Abra o URL para ver o efeito: http: // localhost: 8080
注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中.
Suplemento:
Após a conclusão do empacotamento automático, a página da web do servidor é aberta por padrão. A maneira de fazer isso é abrir o arquivo package.json e modificar o comando dev:
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999 "
### 10. Configure html-webpack-plugin
Use html-webpack-plugin para gerar uma página de visualização.
Porque quando visitamos o http: // localhost: 8080 / padrão, vemos alguns arquivos e pastas. Se quisermos ver nossa página,
precisamos clicar na pasta e clicar no arquivo para visualizá-lo. Então, esperamos ser capaz de visualizá-lo por padrão. Vá para uma página em vez de ver uma pasta ou diretório.
As etapas para implementar a função da página de visualização padrão são as seguintes:
A. Instale o pacote com a função de visualização padrão: html-webpack-plugin
npm install html-webpack-plugin -D
B. Modifique o arquivo webpack.config.js como segue :
// Importar o pacote
const HtmlWebpackPlugin = require ("html-webpack-plugin");
// Criar um objeto
const htmlPlugin = new HtmlWebpackPlugin ({ // Definir o arquivo de modelo para gerar o modelo de página de visualização : " ./src/ index.html ", // Definir a visualização gerada Nome do arquivo do nome da página :" index.html " }) C. Continue a modificar o arquivo webpack.config.js e adicione informações de plug-ins: module.exports = { … plug-ins: [htmlPlugin] }
### 11. O carregador no webpack
empacota módulos não-js por meio do carregador: Por padrão, o webpack só pode empacotar arquivos js. Se você deseja compactar arquivos não-js, é necessário chamar o carregador do carregador para empacotar o
carregador. loader inclui:
1) .less-loader
2) .sass-loader
3) .url-loader: arquivos de pacote e processo relacionados ao caminho de url em css
4) .babel-loader: carregador para processamento de sintaxe js avançada
5) .postcss- loader
6). css-loader, style-loader
注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用
A.安装style-loader,css-loader来处理样式文件
1).安装包
npm install style-loader css-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
}
]
}
}
B.安装less,less-loader处理less文件
1).安装包
npm install less-loader less -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
C.安装sass-loader,node-sass处理less文件
1).安装包
npm install sass-loader node-sass -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader','postcss-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
npm install url-loader file-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用来设置字节数，只有小于limit值的图片，才会转换
//为base64图片
use:"url-loader?limit=16940"
}
]
}
}
F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
A.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用来设置字节数，只有小于limit值的图片，才会转换
//为base64图片
use:"url-loader?limit=16940"
},{
test:/\.js$/,
use:"babel-loader",
//exclude为排除项，意思是不要处理node_modules中的js文件
exclude:/node_modules/
}
]
}
}
### 12. Componentes de arquivo único do
Vue As deficiências dos componentes tradicionais do Vue: os componentes
definidos globalmente não podem ter o mesmo nome, os modelos de string não têm destaque de sintaxe e não suportam css (quando html e js são componentizados, css não está envolvido) e
não é construído com restrições de etapa, apenas H5 e ES5 podem ser usados, mas não o pré-processador (babel).
Solução:
Use componentes de arquivo único Vue. O sufixo de cada componente de arquivo único é .vue.
Cada componente de arquivo único Vue consiste de três partes.
1) Área de modelo composta de componentes de modelo
2) Área de lógica de negócios composta de
script 3) Área de estilo de estilo
código mostrado abaixo:
<template>
组件代码区域
</template>
<script>
js代码区域
</script>
<style scoped>
样式代码区域
</style>
Suplemento: a instalação do plug-in Vetur pode destacar o código no arquivo .vue
Configure o carregador do arquivo .vue
A. Instale o carregador do componente vue
npm install vue-loader vue-template-compiler -D
B. Regras de configuração: altere a matriz de regras no módulo de
webpack.config.js const VueLoaderPlugin = require ("vue-loader / lib / plugin”);
const vuePlugin = new VueLoaderPlugin ();
module.exports = { … plugins: [htmlPlugin, vuePlugin], módulo: { rules: [ … // Other rules { test: / .vue $ /, loader: "vue-loader",
}
]
}
}
### 13. Usando o vue no webpack Na
seção anterior, instalamos um carregador que manipulava os componentes de arquivo único vue. Para disponibilizar os componentes de arquivo único vue, devemos instalar o vue
e usar o vue para fazer referência aos componentes de arquivo único vue.
A. Instalar Vue
npm install vue -S
B. Introduzir vue em index.js: importar Vue de “vue”
C. Criar um objeto de instância Vue e especificar el e, finalmente, usar a função de renderização para renderizar o componente de arquivo único
const vm = novo Vue ({ el: "# first", render: h => h (app) })
### 14. Use webpack para empacotar e publicar o projeto
Antes de o projeto ir ao ar , precisamos empacotar e publicar todo o projeto.
A. Configure package.json
"scripts": { "dev": "webpack-dev-server", "build": "webpack -p" } B. Antes que o projeto seja empacotado, você pode excluir o diretório dist e gerar um novo índice dist.
### 15.Vue scaffolding O
Vue scaffolding pode gerar rapidamente a estrutura básica do projeto Vue.
A. Instale a versão 3.x do scaffold Vue:
npm install -g @ vue / cli
B. Crie um projeto Vue baseado na versão 3.x do scaffold:
1) Use o comando para criar o projeto Vue
Comando : vue create my-project
select Selecionar manualmente recursos (selecionar recursos para criar um projeto) A
verificação de recursos pode ser verificada com espaços.
Se deve usar o roteamento de modo histórico: n
Seleção de ESLint: ESLint + configuração padrão
Quando realizar a verificação de sintaxe ESLint: Lint em salvar
babel, postcss e outros arquivos de configuração Como colocar: Em arquivos de configuração dedicados (usando um arquivo separado para configuração)
se deve salvar como modelo: N
Qual ferramenta usar para instalar o pacote: npm
2) Crie um projeto Vue com base na interface ui
Comando: vue ui
configure as informações do projeto na página de criação de projetos aberta automaticamente.
3). Com base no modelo antigo 2.x, crie um projeto Vue
npm install -g @ vue / cli-init
vue init webpack my-project
C. Analisar a estrutura do projeto gerada pelo Vue scaffolding
node_modules: diretório do pacote dependente
público: diretório de recursos estáticos
src: diretório de origem
src / ativos: diretório de recursos
src / componentes: diretório de componentes
src / views: ver diretório de componentes
src / App.vue: root componente
src / main.js: entrada js
src / router.js: roteamento js
babel.config.js:
arquivo de configuração babel.eslintrc.js:
### 16. Configuração personalizada do scaffolding Vue
A. Configure via package.json [não recomendado]
"vue": { "devServer": { "port": "9990", "open": true } } B .Configure através um arquivo de configuração separado, crie vue.config.js module.exports = { devServer: { port: 8888, open: true } }
### 17. Uso básico do
Element-UI Element-UI: um conjunto de biblioteca de componentes de desktop baseada em 2.0
Endereço oficial do site: http://element-cn.eleme.io/#/zh-CN
A. Instalação:
npm instalar element-ui -S
B. Importar e usar:
importar ElementUI de “element-ui”;
importar “element-ui / lib / theme-giz / index.css”;
Vue.use(ElementUI)