VueJS - Configuração de Ambiente
Existem muitas maneiras de instalar o VueJS. Algumas das maneiras de realizar a instalação são discutidas a seguir.
Usando a tag <script> diretamente no arquivo HTML
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>Vá para o site inicial https://vuejs.org/v2/guide/installation.htmldo VueJS e baixe o vue.js conforme a necessidade. Existem duas versões para uso - versão de produção e versão de desenvolvimento. A versão de desenvolvimento não é minimizada, enquanto a versão de produção é minimizada conforme mostrado na imagem a seguir. A versão de desenvolvimento ajudará com os avisos e modo de depuração durante o desenvolvimento do projeto.
Usando CDN
Também podemos começar a usar o arquivo VueJS da biblioteca CDN. A ligaçãohttps://unpkg.com/vuedará a última versão do VueJS. VueJS também está disponível em jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) e cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js)
Podemos hospedar os arquivos em nosso local, se necessário, e iniciar o desenvolvimento do VueJS.
Usando NPM
Para aplicativos de grande escala com VueJS, é recomendado instalar usando o pacote npm. Vem com Browserify e Webpack junto com outras ferramentas necessárias, que ajudam no desenvolvimento. A seguir está o comando para instalar usando npm.
npm install vueUsando a linha de comando CLI
O VueJS também fornece CLI para instalar o vue e começar a ativar o servidor. Para instalar usando o CLI, precisamos ter o CLI instalado, o que é feito usando o seguinte comando.
npm install --global vue-cli
Uma vez feito isso, ele mostra a versão CLI para VueJS. A instalação demora alguns minutos.
+ [email protected]
added 965 packages in 355.414sA seguir está o comando para criar o projeto usando Webpack.
vue init webpack myproject
Para começar, use o seguinte comando.
cd myproject
npm install
npm run dev
Depois de executar o npm run dev, ele inicia o servidor e fornece a url para exibição no navegador, conforme mostrado na imagem a seguir.
A estrutura do projeto usando CLI se parece com o seguinte.
