从 0 搭建一个 vue3 项目

  • 从 0 搭建一个 vue3 项目已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

创建 dist > index.html创建 src > App.vue创建 src > main.js配置webpack尝试跑起来,运行 npm run build  ,此时会在 dist 文件夹下多出一个 main.js,双击打开 index.html,出现 Hello Nyan Cat 就说明 vue3 项目搭建起来了,接下来我们把它弄的复杂一点


一、先实现一个简易版本

  1. 初始化 npm

    npm init -y // -y 能省去填写信息的步骤,一步到位

  2. 安装几个必要的依赖

    1 npm install css-loader style-loader -D // 解析css 2 npm install vue@next // 修饰符默认 -S 3 npm install vue-loader @vue/compiler/sfc -D // 解析 vue 4 npm install webpack webpack-cli -D // 用这个打包 

  3.  创建必要的文件,并配置webpack

    1. 创建 dist > index.html

       1 <!DOCTYPE html>  2 <html lang="en">  3     <head>  4         <meta charset="UTF-8" />  5         <meta http-equiv="X-UA-Compatible" content="IE=edge" />  6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />  7         <title>从 0 构建 vue3.0 项目</title>  8     <body>  9         <div id="app"></div> 10         <script src="main.js"></script></head> 11     </body> 12 </html>

    2. 创建 src > App.vue

       1 <template>  2     <div class="main">  3         <h1>Hello Nyan Cat</h1>  4     </div>  5 </template>  6   7 <style>  8     h1 {  9         color: red; 10     } 11 </style>

    3. 创建 src > main.js

      1 import { createApp } from "vue"; 2 import App from "./App.vue"; 3  4 const app = createApp(App); 5 app.mount("#app");

    4. 配置webpack

       1 const path = require("path");  2 // 封装一下,后面会频繁用到  3 function resolve(folder) {  4     // path.resolve 和 path.join 的结果一样  5     return path.resolve(__dirname, folder);  6 }  7 // 分离 html、css、js,然后交给loader去处理  8 const { VueLoaderPlugin } = require("vue-loader");  9  10 module.exports = { 11     entry: "./src/main.js", // 设置打包的入口 12     // 设置打包的出口 13     output: { 14         filename: "main.js", 15         path: resolve("dist"), 16     }, 17     resolve: { 18         // 配置下简写 19         alias: { 20             "~": resolve("src"), // 我喜欢用 ~ 21             assets: resolve("src/assets"), // 这里不能使用 "~/assets" 22         }, 23         // 配置下省略 24         extensions: ["vue", ".js", ".ts"], 25     }, 26     //添加模块 27     module: { 28         rules: [ 29             { 30                 // 设置.vue文件的解析规则 31                 test: /.vue$/, 32                 loader: "vue-loader", 33             }, 34             { 35                 // 设置.css的解析规则 36                 test: /.css$/, 37                 use: [{ loader: "style-loader" }, { loader: "css-loader" }], 38             }, 39             { 40                 // 设置 .less的解析规则 41                 test: /.less$/, 42                 use: [ 43                     { loader: "style-loader" }, 44                     { loader: "css-loader" }, 45                     { loader: "less-loader" }, 46                 ], 47             }, 48             { 49                 test: /.(png|jpe?g|gif)$/, 50                 use: [ 51                     { 52                         loader: "file-loader", 53                         options: { 54                             name: "[name].[ext]", 55                             outputPath: "images/", 56                         }, 57                     }, 58                 ], 59             }, 60         ], 61     }, 62     // webpack 会把多个 js 文件打包成一个文件,最终的效果就是这个文件对人类基本不可读;如果程序在运行的过程中报错了,基本不可能找到是哪个源文件的问题,inline-source-map 就可以显示的为我们指示出代码来自哪个文件 63     devtool: "inline-source-map", 64     plugins: [new VueLoaderPlugin()], 65 };

    5. 尝试跑起来,运行 npm run build ,此时会在 dist 文件夹下多出一个 main.js,双击打开 index.html,出现 Hello Nyan Cat 就说明 vue3 项目搭建起来了,接下来我们把它弄的复杂一点

二、尝试不断增加功能 ^o^

  1. 安装一些常用的依赖

    1 npm install less less-loader -D // 可以很方便地开发 css 2 npm install file-loader -D // 可以把小图片解析成 base64,从而减少 http 请求 3 npm install webpack-dev-server -D // 让项目运行在本地地服务器,并提供热更新 4 npm install html-webpack-plugin -D // 这个插件允许我们在 index.html 使用变量,可以很方便地修改信息

  2. 为 App.vue 添加一张图片,并且使用 less

     1 <template>  2     <div class="main">  3         <h1>Hello Nyan Cat</h1>  4         <img :src="require('assets/NyanCat.jpg').default" alt="Nyan Cat" />  5     </div>  6 </template>  7   8 <style lang="less">  9     .main { 10         display: flex; 11         flex-direction: column; 12         align-items: center; 13         span { 14             color: red; 15         } 16     } 17 </style>

  3. 修改下 webpack,这里只有部分代码,自行对比

    1. 关于 html-webpack-plugin,由于有了这个插件,所以把 dist > index.html 移动到 public > index.html,然后在 output 属性下添加 clean: true,表示每次打包前都清空 dist

      1 // 分离 html、css、js,然后交给loader去处理 2 const { VueLoaderPlugin } = require("vue-loader"); 3  4 const HtmlWebpackPlugin = require("html-webpack-plugin");

      1 plugins: [ 2     new VueLoaderPlugin(), 3     new HtmlWebpackPlugin({ 4         filename: "index.html", // 配置输出后的html文件名,前面也可以添加目录 5         template: "./public/index.html", // 配置模板 6     }), 7 ],

    2. 关于解析规则,增加 less 解析和图片解析,注意 less 解析和 css 解析要分开写,loader 的顺序不能错了

       1 {  2     // 设置.css的解析规则  3     test: /.css$/,  4     use: [{ loader: "style-loader" }, { loader: "css-loader" }],  5 },  6 {  7     // 设置 .less的解析规则  8     test: /.less$/,  9     use: [ 10         { loader: "style-loader" }, 11         { loader: "css-loader" }, 12         { loader: "less-loader" }, 13     ], 14 }, 15 { 16     test: /.(png|jpe?g|gif)$/, 17     use: [ 18         { 19             loader: "file-loader", 20             options: { 21                 name: "[name].[ext]", 22                 outputPath: "images/", 23             }, 24         }, 25     ], 26 },

    3. 关于服务器

       1 plugins: [  2     new VueLoaderPlugin(),  3     new HtmlWebpackPlugin({  4         filename: "index.html", // 配置输出后的html文件名,前面也可以添加目录  5         template: "./public/index.html", // 配置模板  6     }),  7 ],  8 devServer: {  9     port: 1024, 10     open: true, 11 },

  4. 然后尝试运行在服务器 npm run dev ,就像下面这样,我偷偷改了下颜色哈哈从 0 搭建一个 vue3 项目

三、最后一步是使用 ts,奈何我才刚学会语法,后面再更新吧