vue项目的搭建

最新推荐文章于 2023-06-18 11:04:18 发布

原创最新推荐文章于 2023-06-18 11:04:18 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何从零开始搭建一个基于Webpack的Vue项目，并通过一系列步骤完成Vant组件库的适配，包括安装Node.js、Webpack、Vue-CLI，创建Vue项目，安装并配置Vant及px2rem-loader等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装node.js

2.全局安装webpack

npm webpack install -g

3.安装vue--cli

npm install -g vue-cli

vue-cli脚手架：

他与webpack一起工作
他提供了一套基础的、可直接使用的vue项目模板

3.创建一个基于webpack的vue项目

vue init webpack project

4.运行项目

npm run dev

5.安装一些插件

npm install vue-router --save
npm install vue-resource --save
npm install vuex --save

6.README.md 项目说明文件package.json 依赖包，开发项目所需要第三方模块的依赖 package-lock.json确定第三方包的版本

Index.html 首页入口文件

static 静态资源静态图片

src 开发的主要目录，项目的源代码 main.js入口文件 App.vue根组件

node-modules 以来的第三方node包

config 项目的配置的文件 index基础配置信息 dev.env.js开发环境配置信息 prod.env.js线上环境

build 项目打包的webpack的配置内容 webpack.base.config.js 基础 webpack.dev.conf.js 开发 webpack.prod.conf.js 线上

7.使用vant 组件库适配

1.安装lib-flexible　　 
npm i lib-flexible --save
2.在main.js中引入lib-flexible
import 'lib-flexible/flexible';
安装px2rem-loader（用于将px转换为rem的工具）
3.npm install px2rem-loader 
4.配置px2rem-loader
// 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如:
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5 // 这里设置html根字体，通常设置为设计稿宽度的 1/10。vant-UI的官方根字体大小是37.5
    }
  }
5.在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    。。。。
}
6.安装Vant组件库
npm i vant -S 
7.按需引入vant 需安装插件babel-plugin-import
npm i babel-plugin-import -D 
8.在babelrc中配置：
"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ],

全局引入vant

import Vue from vue
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);