vue项目的基础搭建

饺子不放糖
187 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

前言：从开始vue到现在，接触各种业务需要搭建vue项目都是使用vue-cli一把梭哈，所以今天从0搭建一个vue项目帮助自己理解webpack和vue。

1.创建项目文件夹

mkdir project

image.png

2.初始化

npm init 或者 npn init -y

此时文件夹下会出现package.json,package.json主要记录一下项目的基本信息和后面我们需要管理各种包
image.png
image.png

3.创建public

public是我们用来放置index.html的文件夹，index.html是一个模版，后面会提到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从0搭建vue项目</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

4.安装基本的插件

4.1安装webpack和webpack-cli

webpack是一个模块打包工具，而webpack-cli是对webpack命令进行管理和检查

npm i webpack webpack-cli -D

此时在package.json会出现在webpack的版本号
image.png

4.2创建src和main.js

src是以后用来写代码的文件夹，在src下载新建main.js，main.js在这里是作为一个项目的入口文件来使用的。
在main.js写上一些代码

function add(a,b){
    return a+b
}
console.log(add(1,2));

4.3配置入口文件

在项目文件夹下新建一个**webpack.config.js**
webpack.conifg.js是用来配置webpack的文件。4.2我们创建的main.js就是webpack构建时需要的入口文件

const path = require('path')
module.exports ={
    // 打包模式，development和production或者none
    mode:"development",
    // 入口文件
    entry:path.join(__dirname,"./src/main.js"),
    // 输入文件
    output:{
        // 输入的文件夹
        path: path.join(__dirname, '/dist'),
        // 输入的文件名
        filename: "bundle-[contenthash:8].js"
    }
}

4.4配置打包命令

在package.json的script配置：
"build":"webpack"
image.png

在项目的终端执行npm run build,打包成功之后会出现dist文件夹
image.png
打包成功！
我们在刚才的public的index.html引入js文件，打开浏览器的控制台会出现3说明打包之后的文件能正确执行
image.png

4.5使用htmlwebpackplugin，cleanwebpackplugin

如果我们每一次修改代码之后进行打包，都要在index.html进行引入，未免繁琐，所以可以使用htmlwebpackplugin将public下index.html作为打包之后的html模版
npm i html-webpack-plugin -D
webpack.config.js


const HtmlWebpackPlugin  = require('html-webpack-plugin')
module.exports ={
   .......
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",//打包后的名字
            template: path.resolve(__dirname, "./public/index.html"),//模板
            // js文件插入 body里
            inject: 'body',
        })
    ]
}

cleanwebpackplugin可以在每次打包前将dist文件夹删除掉，但是在webpack5下，可以在output中配置clean:true;

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
     ........
    // 输入文件
    output: {
     .......
        clean: true,//打包前将旧的dist文件夹删除掉
    },
    ..........
}

4.6 webpack-dev-server

经过上述步骤我们已经可以将打包后的js文件自动注入到html中了，现在我们来使用命令行自动打开浏览器，这里需要借助webpack-dev-server这个插件。
npm i webpack-dev-server -D，安装好之后在webpack.config.js中配置


module.exports = {
    ......
    devServer: {
        port: 5058,//端口号
        host: "localhost",//域名。localhost或者是本机ip
        hot: true,//是否开启热更新
    },
    .....
}

然后在package.json中配置启动命令
image.png
我们在main.js加点东西，让它在页面上输出
main.js：

document.querySelector("#app").innerHTML='这是一个从0搭建的vue项目'

在终端中执行npm run dev,控制台会显示：
image.png
将地址复制到浏览器：
image.png

而且可以随便修改mian.js中的内容且不需要重复执行npm run dev就会自动更新到浏览器上，来源于hot：true

5.css和图片资源

webpack默认是对js进行打包的，但是css和图片资源需要使用loader才可以进打包

5.1css-loader

css要么使用内联样式，要么使用css文件，所以需要安装，可以使用sass或者less，安装对于的loader就行
npm i css-loader style-loader sass-loader -D
在webpack.config.js中进行配置


module.exports = {
   ..........
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(scss|sass)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
  ...........

}

然后我们在项目下新建一个index.css,将文字的颜色改为红色，并且在main.js文件中倒入css文件
image.png
重新执行npm run dev,浏览器已经将文字显示为红色
image.png

5.2图片

现在是webpack5.0的时代了，早前的url-loader也就用不上了可以使用webpack自带的assets-modlue
在webpack.config.js配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   ...........
    module: {
        rules: [
           .........
            {
                // 匹配文件后缀的规则
                test: /\.jpeg/,
                type: 'asset',
                generator: {
                  // 打包到 dist/image 文件下
                 filename: 'images/[contenthash][ext][query]',
                },
            }
        ]
    },
   ........
}

修改一下index.css中的内容
image.png
打包之后出现
image.png
浏览器预览的效果：
image.png

6.babel

babel的作用就是将高语法转为低语法，以此来兼容一些版本较低的浏览器
npm i @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader -D
在webpack.config.js中配置

...........
module.exports = {
   .........
    module: {
        rules: [
           ..........
            {
                // 匹配js后缀文件
                test: /\.js$/,
                // 排除node_modules中的js
                exclude: /node_modules/,
                use: [
                  'babel-loader'
                ],
              }
        ]
    },
  ..........
}

然后我们在main.js中使用比较新的语法
image.png
执行npm run build
在打包后的文件中查找const和箭头函数，已经被转为var和function了
image.png

7.最后的vue

最后我们在项目中使用vue,安装vue，vue-loader和vue- template-compiler
vue-loader是为了帮助webpack能够解析vue文件的，vue-template-compiler是编译vue模板的包，传入模板返回AST抽象语法树
注意：vue和vue- template-compiler版本要一致
npm i vue@2.6.10 vue-template-compiler@2.6.10 vue-loader
在webpack.config.js中配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
   .........
    module: {
        rules: [
           .........
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
        ]
    },
......
    plugins: [
......
        new VueLoaderPlugin()
    ],
}

在src下新建一个App.vue

<template>
   <div class="app">
       {{ name }}
   </div>
</template>

<script>
 export default {
  name: 'App',
  data(){
     return{
         name:"这是一个从0到一的vue项目"
     }
  }
}
</script>

在main.js中引入vue

import Vue from "vue";
import App from './App.vue'

new Vue({
    render:h=>h(App)
}).$mount('#app')

打开浏览器
image.png

结局

一个基本的vue项目就搭建完成了，在此奉上gitee连接 gitee.com/zqingq/proj…

avatar
文章
阅读
粉丝