专业的编程技术博客社区

网站首页 > 博客文章 正文

从0搭建一个Vue项目(一):项目初始化 1

baijin 2024-10-21 03:38:39 博客文章 6 ℃ 0 评论

开发工具：VS Code，Node..js

工具版本：node v14.17.0；npm v6.14.13

开发准备：

  • VS Code 不能新建工作区，先新建文件夹 vue-admin，将工作区另存到该文件夹，如此就新建了一个工作区 vue-admin
  • 点击顶部--菜单栏--终端，在下方输入 npm init ，并回车

初始化过程中，需要配置一些作者信息等参数，鉴于本次项目是本地项目，直接回车，默认就行，初始化完成后，根目录下将会出现 .json 文件：package.json 和 package-lock.json，package-lock.json 是默认文件，不要修改，配置需要在package.json中配置。

  • 新建一个src文件目录，放置需要的文件
  • 在根目录新建一个文件-- webpack.config.js

模块安装：

本次安装模块，都是后续会用到的，建议全部安装

安装方式：在最下方的终端中：npm i 模块名@版本，如：npm i vue-loader@15.9.7

（也可以不指定版本，默认就是最新的版本）

将以上模块安装完成后，在src目录下，新建 app.vue，index.html，index.js

其中，将以下代码复制到文件中

app.vue

<template>
    <div class="test">{{text}}</div>
</template>
<script>
export default {
    data() {
        return {
            text: 'hello'
        }
    }
}
</script>

<style lang="scss">
.test{
    color: red;
}
</style>

index.js

import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
    render:(h) => h(App)
}).$mount(root)

当然到现在，还不够，.vue 文件不能直接在浏览器访问，这个时候就用到前面安装的模块了

本次需要先对vue文件进行打包：

在package.json 文件中，添加一行新脚本

"build": "webpack  --config webpack.config.js",

配置webpack.config.js

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  	// 配置入口
    entry: path.join(__dirname, 'src/index.js'),
  	// 配置输出目录，输出文件名
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    devServer: {
      	// 配置访问路径，端口。设置热部署
        contentBase: path.join(__dirname, "/"),
        host: 'localhost',
        port: '8081',
        hot: true
    },
    module: {
        rules: [
            {
              test: /\.vue$/,
              loader: 'vue-loader'
            },
            {
              // 设置支持scss，编译工具
              test: /\.scss$/,
              use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

最后在下方终端使用

npm run build


打包项目，完成后查看根目录下，是否已经存在一个dist目录

配置 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>
      测试页面
    </title>
  </head>
  <body>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

如此，这个项目都基本完成了，整体目录结构如下

运行项目前，还需要在 package.json 中添加一行启动脚本

"start": "webpack serve --mode development"

最后在下方终端中，输入代码

npm run start

在浏览器地址栏输入

http://localhost:8081/src/index.html

访问上面页面，就是访问成功了。。。


使用模块详解

webpack-dev-server 主要提供两个功能：

  1. 为静态文件提供web服务
  2. 自动刷新和热替换(HMR)，自动刷新指当修改代码时webpack会进行自动编译，更新网页内容，热替换指运行时更新各种模块，即局部刷新
  3. 使用方式，配置脚本文件 webpack serve -参数

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表