vue3项目实战从0开始

左撇子没秃头

已于 2022-02-11 10:47:37 修改

阅读量3.5k

点赞数 3

文章标签： npm webpack vue.js

于 2022-01-27 15:36:08 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44191425/article/details/122684703

版权

这篇博客详细介绍了如何从零开始搭建Vue3项目，包括使用vue cli创建项目、配置vue.config.js、.env文件、.browserslistrc、.eslintrc.js和babel.config.js等，同时提到了npm和cnpm的使用，以及项目的基本文件结构和配置项的解释。

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

安装

首先查看一下你当前npm的版本，vue3的版本需要大于3.0，建议安装最新的npm

查看版本

 `npm -v`

升级或安装cnpm

npm install cnpm -g`

升级npm

 `cnpm install npm -g`

cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用，所以推荐使用cnpm，所以我们需要安装一下淘宝镜像 `

npm install -g cnpm --registry=https://registry.npm.taobao.org`
npm config set registry https://registry.npm.taobao.org

安装成功之后检验一下是否安装成功

 `cnpm -v`

卸载淘宝镜像

npm uninstall cnpm -g

cnpm 和 npm安装依赖包的方式一样，一个用npm install ，一个用cnpm install，也可以简写 npm i /cnpm i

vue.js 最新稳定版

cnpm install vue@next

vue cli命令

全局安装 vue-cli

cnpm install -g @vue/cli

你也可以用yard

yarn global add @vue/cli

查看版本

vue --version   或者  vue -V

注意：vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令，如果你之前已经安装了 vue-cli 2.x，它会被替换为 Vue-cli 3.x。

创建项目

先附上官网地址 https://cli.vuejs.org/zh/guide/

执行命令 vue create demo ，但是这个命令很多时候不能选择，所以我们换个命令，这个我也有写过 https://blog.youkuaiyun.com/weixin_44191425/article/details/122409426?spm=1001.2014.3001.5501

所以我的执行命令是 winpty vue.cmd create hello-world

运行之后会出现下面的界面。默认的是vue2，我们只要按键盘上的上下左右键就可以选择自己想要的配置，我这里选的是第二个
在这里插入图片描述
成功了之后会如下图

执行一下命令 npm run serve ,项目运行成功会出现以下页面

配置项

项目创建成功之后，我们要做实际的开发，肯定是要做一下相关的配置

1、vue.config.js

首先在根目录下面创建一个vue.config.js的文件
在这里插入图片描述
改文件是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写

在这里插入图片描述
官网上有七七八八一堆配置项，所以根据你工作中自己需要的来进行相关的配置，我这里简单配置一下

//我们采用node起服务，可以使用node 的一些相关方法
const path = require("path");
//该插件使用 terser 来压缩 JavaScript
const TerserPlugin = require("terser-webpack-plugin");
//文件路径
function resolve(dir) {
   
  return path.join(__dirname, dir);
}
//当前环境是否为dev
const isDev = process.env.NODE_ENV === "development";
module.exports = {
   
  //是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
  lintOnSave: isDev,
  //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: (config) => {
   
  //设置别名
    config.resolve.alias.set("@", resolve("src"));
    // 我们有时候需要自己定义svg，所以也定义一下
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.include