Comment créer un projet vue sur webpack-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment créer un projet vue sur webpack

亚连

Jun 14, 2018 pm 05:57 PM

vue.jswebpack搭建

Cet article présente principalement les étapes de construction d'un projet vue avec webpack. Je vais maintenant le partager avec vous et vous donner une référence.

Préparation

webpack
vue.js
npm
nodejs
Syntaxe ES6

Puisque le contenu de cet article est de charger vue via npm, alors commencez Vous devez d'abord installer l'environnement nodejs. Une fois l'installation terminée, effectuez les étapes suivantes :

Créez le projet

mkdir vue-demo 
cd vue-demo

Utilisez la commande npm init pour générer le package. fichier json

npm init

Approximativement Le package.json généré est le suivant :

{
 "name": "vue-demo",
 "version": "1.0.0",
 "description": "this is a vue demo",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "license": "ISC",
 "dependencies": {
 }
}

Présentez webpack Pour savoir comment utiliser webpack, veuillez vous référer au site officiel

npm install webpack --save-dev

Si la vitesse de téléchargement avec npm est trop lente, vous pouvez utiliser le miroir cnpm de Taobao

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

Entrez la commande ci-dessus pour pointer npm vers le miroir domestique. Lorsque vous l'utilisez, vous devez le remplacer. npm avec cnpm. Laissez les autres éléments inchangés

Créez webpack.config dans le fichier .js du projet

const path = require(&#39;path&#39;)
module.exports ={
 entry:&#39;./src/main.js&#39;,
 output:{
  path:path.resolve(__dirname,&#39;dist&#39;),
  filename:"demo.js"
 }
}

Utilisez la commande webpack pour compiler

webpack

Le répertoire du projet compilé est le suivant :

Remarque : Avant d'utiliser la commande webpack, vous devez créer le fichier index.html et main Fichiers .js. Le fichier main.js se trouve dans le répertoire src

Le contenu de index.html est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <script src="./dist/demo.js"></script>
</body>
</html>

Le contenu de main.js est le suivant

alert(&#39;hello world&#39;);

Le contenu de main.js est le suivant. 🎜>

Introduire vue

npm install vue --save

Après avoir exécuté la commande, le code suivant sera ajouté à package.json

"dependencies": { "vue": " ^2.4.2" >

Modifiez le contenu de main.js avec le code suivant

import Vue from &#39;vue&#39;
var vm = new Vue({
 el:&#39;#app&#39;,
 data:{
  msg:&#39;hello vue&#39;
 }
})

Introduisez babel

npm install --save-dev babel-core babel-loader

Puisque de nombreuses syntaxes es6 sont utilisé lors de l'utilisation de vue, mais de nombreux navigateurs ne prennent plus très bien en charge es6, ces syntaxes doivent donc être converties en syntaxe es5 lors de la compilation.

Pour utiliser Babel, veuillez lire la documentation du site officiel http://babeljs.cn/.

Ajoutez Babel au fichier de configuration webpack.config.js :

const path = require(&#39;path&#39;)

module.exports ={
 entry:&#39;./src/main.js&#39;,
 output:{
  path:path.resolve(__dirname,&#39;dist&#39;),
  filename:"demo.js"
 },
 module:{
  rules:[
   {
    test: /\.js$/,
    loader:"babel-loader",
    exclude: /node_modules/
   }
  ]
 }
}

Entrez ensuite la commande webpack sur la ligne de commande pour compiler, puis ouvrez index.html avec un navigateur après le La compilation du fichier est terminée, vous trouverez l'erreur suivante dans la console du navigateur :

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

Cela est dû au fait que la version d'exécution de vue est utilisée et que le compilateur de cette version n'est pas disponible. Pour le passer à la version runtime + compilée, vous devez ajouter le code suivant au fichier de configuration

resolve: {
 alias: {
  &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; for webpack 1
 }
 }

A ce moment, exécutez la commande webpack pour recompiler. Après compilation, accédez à la page index.html. . Le contenu de la page est tel qu'indiqué ci-dessous

À ce stade, un projet vue basé sur webpack est construit.

Quelques configurations courantes du webpack

Dans le développement proprement dit du projet, nous introduirons également des fichiers de ressources tels que des CSS, des images et des polices. L'introduction de ces fichiers nécessite des chargeurs correspondants pour les charger dans le projet et les utiliser normalement.

Ce qui suit présente uniquement comment utiliser certains des chargeurs dont nous avons besoin. Pour plus d'informations, veuillez consulter la documentation du chargeur Webpack.

cssloader

Nous devons introduire css-loader et style-loader (le but de l'installation de style-loader est d'intégrer du CSS dans du HTML avec style ).

Exécutez la commande

npm install --save-dev css-loader style-loader

Configurez ce qui suit dans webpack.config.js

module: {
  rules: [{
   test: /\.js$/,
   loader: "babel-loader",
   exclude: /node_modules/
  }, {
   test: /\.css$/,
   loader: &#39;style-loader!css-loader&#39;
  }]
 },

Créez ensuite un dossier styles dans le répertoire src et placez-le dedans Ajoutez un fichier main.css et écrivez le contenu suivant

#app{
 color:red;
}

Ensuite, exécutez la commande webpack et rechargez le fichier index.html. On peut voir que le CSS a pris effet.

Chargement des ressources d'image

Utilisez le chargeur de fichiers ou le chargeur d'url pour charger. Ils sont tous deux utilisés pour empaqueter des fichiers. et les ressources d'image. Les deux. La différence est que le chargeur d'URL encapsule le chargeur de fichiers.

S'il y a beaucoup d'images lors de la visite du site Web, de nombreuses requêtes http seront envoyées, ce qui réduira les performances de la page. Ce problème peut être résolu par le chargeur d'URL. url-loader encodera l'image importée et générera dataURl. Cela équivaut à traduire les données de l'image en une chaîne de caractères, puis à regrouper la chaîne de caractères dans un fichier. Enfin, il vous suffit d'importer ce fichier pour accéder à l'image.

Bien sûr, si l'image est plus grande, l'encodage consommera des performances. Par conséquent, url-loader fournit un paramètre de limite. Les fichiers inférieurs à la limite d'octets seront convertis en DataURl et les fichiers supérieurs à la limite seront copiés à l'aide du chargeur de fichiers.

Ici, nous utilisons url-loader Puisqu'il est basé sur l'encapsulation du chargeur de fichiers, le chargeur de fichiers doit également être introduit.

npm install --save-dev file-loader url-loader

Ajoutez la configuration suivante aux règles de webpack.config.js

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: &#39;url-loader&#39;,
 options: {
  limit: 10000
 }
}

L'étape suivante consiste à introduire l'image dans le code, ce qui doit être fait dans main .js et index.html respectivement. Modifiez comme suit :

main.js

import Vue from &#39;vue&#39;
import &#39;./styles/main.css&#39;
import logo from&#39;./images/logo.png&#39;

var vm = new Vue({
 el:&#39;#app&#39;,
 data:{
  logo:logo,
  msg:&#39;hello vue&#39;
 }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue demo</title>
</head>
<body>
 <p id="app">
  <img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="logo"  : alt="logo" >
  {{msg}}
 </p>
 <script src="./dist/demo.js"></script>
</body>
</html>

Enfin, exécutez la commande webpack et accédez à index. .html, le résultat est le suivant

在测试中发现当图片大于10KB的时候发现加载图片失败，找不到图片，但此时在dist目录下面是能看到已经通过加载器加载成功了的图片，再通过浏览器的开发者工具对图片的引用路径进行检查时，可以发现页面中img的路径不对，路径中只有文件名缺失了前面的dist目录,所以此时我们需要将main.js中的代码进行如下修改

logo:"./dist/"+logo,

重新编译后图片就显示出来了。但是现在新的问题又出来了，由于我们在配置文件中配置了小于10kb的代码将以 base64的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。解决此问题有两种办法：

不使用base64的形式将图片内嵌到代码中
将html文件放到dist目录中既然用了url-loader加载器则不推荐使用第一种。所以我们使用第二种方式。

将html文件放到dist目录中最简单的办法就是把index.html文件复制到dist目录中，然后将引入就是的代码改为：

<script src="./demo.js" > </script>

main.js中改回原来的设置

logo:logo,

重新编译后图片在两种情况下都可以加载出来了。

还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件

引入插件

npm install --save-dev html-webpack-plugin

webpack.config.js 中增加如下配置

const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
...

plugins:[
  new HtmlWebpackPlugin()
]

重新编译后发现在dist目录下生成了如下内容的html的文件

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
 </head>
 <body>
 <script type="text/javascript" src="demo.js"></script></body>
</html>

与我们原来自己的写index.html相比，该文件缺少了下面这些这些内容

<p id="app">
  <img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="logo"  : alt="logo" >
  {{msg}}
 </p>

现在需要对配置文件做稍微的修改，让html文件在创建的时候自动将index.html的中内容复制过去。通过查阅该插件的文档，可知需做如下修改：

plugins:[
  new HtmlWebpackPlugin({
   title: &#39;vue demo&#39;,
   template: &#39;index.html&#39;   
  })
]

index.html 文件中去除 script代码，在重新编译后，即可获取我们需要的html文件

详细参数配置请参考官方文档

webpack-dev-server

在我们实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server 。

webpack-dev-server 为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。

npm install --save-dev webpack-dev-server

在webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件

const path = require(&#39;path&#39;)
const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)

module.exports = {
  entry: &#39;./src/main.js&#39;,
  output: {
    path: path.resolve(__dirname, &#39;dist&#39;),
    filename: "demo.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: &#39;vue demo&#39;,
      template: &#39;index.html&#39;
    })
  ],
  devServer:{
    contentBase:"./dist"
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: &#39;style-loader!css-loader&#39;
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: &#39;url-loader&#39;,
        options: {
          limit: 10000
        }
      }
    ]
  },
  resolve: {
    alias: {
      &#39;vue$&#39;: &#39;vue/dist/vue.esm.js&#39; // &#39;vue/dist/vue.common.js&#39; for webpack 1
    }
  }
}

上面红色字体的配置信息是告知webpack-dev-server，在localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

让我们在package.json中添加一个script脚本,可以直接运行开发服务器(dev server)：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open",
  "build": "webpack"
 },

然后输入如下命令

npm run dev

启动完成后，浏览器会自动打开一个访问 http://localhost:8080/ 的页面

此时服务已启动成功。

字体的加载

字体的加载方式与图片的一样也是用url-loader，配置如下

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: &#39;url-loader&#39;,
  options: {
    limit: 10000
  }
 }

vue-loader

在vue的开发过程中，通常我们需要写.vue结尾的文件即组件，如app.vue

<template>
  <p id="app">
    <img src="/static/imghwm/default1.png"  data-src="./images/logo2.jpg"  class="lazy"   alt="logo" >
    {{msg}}
  </p>
</template>
<script>
  export default {
    name:&#39;app&#39;,
    data(){
      return {
        msg:"hello vue !!"
      }
    }
  }
</script>

该文件需要通过vue-loader来进行加载，现在我们需要做如下配置。通过 vue-loader 和vue-template-compiler来加载并编译.vue文件

npm install --save-dev vue-loader vue-template-compiler

webpack.config.js 中

{
  test: /\.vue$/,
  loader: &#39;vue-loader&#39;
 }

为了在vue中引入对.vue的使用，我们需进行如下修改

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue demo</title>
</head>
<body>
  <p id="app">
  </p>
</body>
</html>

main.js

import Vue from &#39;vue&#39;
import &#39;./styles/main.css&#39;
import App from &#39;./app.vue&#39;

new Vue({
  el: &#39;#app&#39;,
  template: &#39;<App/>&#39;,
  components: { App }
})

app.vue

<template>
  <p id="app">
    <img src="/static/imghwm/default1.png"  data-src="./images/logo.png"  class="lazy"   alt="logo" >
    {{msg}}
  </p>
</template>
<script>
  export default {
    name:&#39;app&#39;,
    data(){
      return {
        msg: &#39;hello vue !!&#39;
      }
    }
  }
</script>

修改完成后运行 npm run dev 命令，获得如下效果的页面

热部署

在上一步中，如果我们修改app.vue文件中的msg的参数，可以看到页面会自动刷新。但是此时是页面全局刷新的，如果我们只想局部刷新即只刷新修改的部分，需要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:

new webpack.HotModuleReplacementPlugin()

然后去package.json中，script 里面dev的值中加上 --hot -only

"dev": "webpack-dev-server --hot-only --open",

然后重启服务，再修改 msg 的值，会发现此时值的改变是局部刷新的。

生产环境

如果我们在浏览器的控制台中发现有如下提示

意思时说项目现在运行在开发环境中，在部署到正式环境下时，要确保它是处于production的模式。需要将代码打包部署到生产环境时需要进行如下配置：

var webpack = require(&#39;webpack&#39;)
module.exports = {
// ...
plugins: [
// ...
  new webpack.DefinePlugin({
    &#39;process.env&#39;: {
      NODE_ENV: &#39;"production"&#39;
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
]}

上面是我整理给大家的，希望今后会对大家有帮助。

在Vue-cli中如何实现为单独页面设置背景色

在Vue中如何实现点击后文字变色

使用JS如何实现循环Nodelist Dom列表

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn