Les graphiques et le texte présentent vue.js de l'installation au processus de construction

Cet article présente principalement en détail l'ensemble du processus de vuejs, de l'installation à la construction. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Initialement, lors de l'utilisation de vue, il était directement téléchargé. les fichiers étaient exploités selon la méthode précédente

Plus tard, j'ai trouvé que cela semblait plus pratique à utiliser après l'installation, puis j'ai commencé à réfléchir à la façon de configurer le framework. Voici le processus :

Installation

1. Installez nodejs

Téléchargez-le simplement en ligne

2.

Ouvrir la saisie de la ligne de commande

npm install -g cnpm --registry= https://registry.npm.taobao.org

3. Installez le webpack

cnpm install webpack -g

4. Créez un nouveau dossier dans le chemin où vous souhaitez créer un nouveau projet pour stockez les fichiers du projet

cd dans votre chemin de fichier

vue init webpack-simple nom du projet (le nom ne peut pas être en chinois)

Il y aura des paramètres par défaut derrière cela

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5. Terminé Plus tard, vous constaterez que vous avez déjà les fichiers requis dans votre dossier

6. L'installation des dépendances du projet npm sera lente car il existe de nombreux fichiers

npm install

7. Exécutez votre projet

npm run dev

À ce stade, votre base l'installation et la configuration sont terminées

Ce qui suit concerne l'introduction de certains fichiers requis que j'ai rencontrés dans le projet

Importation de jQuery.

Lorsque je discutais avec d'autres auparavant, il a dit que vue n'avait pas besoin d'utiliser jQuery, mais notre projet disait qu'il devait être installé, alors je l'ai installé - _-
Le premier est l'installation en ligne de commande

npm install jquery --save

Ajouter - -save signifie l'enregistrer localement
puis l'ajouter à webpack.config .js
module.exports.plugins = Ajouter

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

et ajouter

import $ from 'jquery'
window.$=$

en js comme ça jQuery Il a été importé avec succès dans le projet

2, statiqueimportation css et js

l'import css statique est Dans le fichier .vue correspondant import
par exemple

@import './assets/css/global.css';

js statique dans le js correspondant require et ces js et css A placer sous actifs

require('./assets/js/global.js')

3. import
Les méthodes d'importation d'elementui sont les mêmes. Voici vue-resource comme exemple

npm install vue-resource --save

. importez et utilisez

dans le js qui doit être importé

import VueResource from 'vue-resource'
Vue.use(VueResource)

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!