vue scaffolding v-cli, o primeiro programa vue

1. instalação v-cli

• Ao jogar v-cli vue client scaffolding, node.js precisa ser instalado, que é uma ferramenta para gerenciamento de front-end de pacotes js
• Instalar oficialmente um andaime vue-cli

1. npm install vue-cli -g
2. vue list 

Se a lista de vue não estiver disponível, saia do computador

2. Use o webpack para construir programas vue

1. Selecione um diretório, abra a janela cmd neste diretório, todas as etapas são as seguintes

vue init webpack myvue # 等待nodejs构建
cd myvue  # 进入myvue目录下
npm install 
npm run dev 

Ao construir o projeto, você preencherá algumas informações do projeto, selecionei não para todos, você pode escolher sim, o plug-in será adicionado automaticamente ao projeto

após a instalação do npm, pode haver erros, basta seguir as instruções para corrigi-lo.

Execute o projeto atual e visite a porta abaixo.

Acesse o projeto

3. Introdução ao Catálogo

• Eu uso a pasta aberta por ideia
  

4. pacotes webpack são exibidos em arquivos js

• Os pacotes de instalação do webpack e compila a sintaxe es6 na sintaxe es5 para execução

npm install webpack -g  # 打包工具
npm install webpack-cli -g # 客户端工具

Pontos de desenvolvimento do módulo de front end, cada pacote pode ser apresentado um ao outro. Arquivo Js compilado por um WebPACK

hello.js

// es6 语法 exports暴露一个方法
exports.sayHi = function() {
    
    
    document.write('<h3>bitqian666</h3>')
}

main.js

// 导入js文件
let hello = require('./hello')
hello.sayHi()

Configuração do pacote

module.exports = {
    
    
    entry: './modules/main.js',
    output: {
    
    
        filename: './bundle.js'
    }
}

控制台运行 webpack

Gere bundle.js e use-o diretamente