小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

vue3项目实战从0开始_vue3项目需要npm版本

作者：小丑西瓜9 | 2024-02-18 03:37:15

踩

vue3项目需要npm版本

安装

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

查看版本

 `npm -v` 
1

升级或安装cnpm

npm install cnpm -g`
1

升级npm

 `cnpm install npm -g`
1

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

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

1
2
3

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

 `cnpm -v`
1

卸载淘宝镜像

npm uninstall cnpm -g
1

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

vue.js 最新稳定版

cnpm install vue@next
1

vue cli命令

全局安装 vue-cli

cnpm install -g @vue/cli
1

你也可以用yard

yarn global add @vue/cli
1

查看版本

vue --version   或者  vue -V
1

注意：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.csdn.net/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
      .add(resolve("src/components/icons/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "[name]",
      })
      .end();

    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule("images");
    imagesRule.exclude.add(resolve("src/components/icons/svg"));

    config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);

    config.module
      .rule("less")
      .oneOf("vue")
      .use("style-resource")
      .loader("style-resources-loader")
      .options({
        patterns: [path.resolve(__dirname, "src/style/variables.less")],
        injector: "append",
      });

    config.module
      .rule("cast")
      .test(/\.cast$/)
      .use("raw-loader")
      .loader("raw-loader")
      .end();
  },
//https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
  configureWebpack: (config) => {
    let prodPlugins = [];
    if (!isDev) {
      prodPlugins = [
        // new CompressionPlugin({
        //   test: /\.(js|css)(\?.*)?$/i,
        //   // threshold: 50,
        // }),
      ];
      config.optimization = {
        runtimeChunk: "single",
        minimize: true,
        minimizer: [
          new TerserPlugin({
            parallel: true,
            terserOptions: {
              warnings: false,
              compress: {
                drop_console: true,
                drop_debugger: true,
              },
            },
          }),
        ],
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 120000,
          maxSize: 250000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                return `npm.${packageName.replace("@", "")}`;
              },
            },
          },
        },
      };
    }

    config.plugins = [...config.plugins, ...prodPlugins];
  },
  productionSourceMap: false,
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  // 代理
  devServer: {
    hotOnly: true, // 热更新
    // port: 8080, // 端口号
    proxy: {
      "/api": {
        // target: `${process.env.VUE_APP_PROXY_BASE_URL}`,
        target: 'http://10.0.70.5:8080',
        changeOrigin: true, // 是否跨域
        ws: true,
        pathRewrite: {
          '/api': '',
        },
        // 协议走https，将secure设为false
        //secure: true, //https绕过ss认证 默认情况下如果请求的服务是https的，并且证书是未认证的的，则该错未认证证书默认是无法使用的。如果想要使用该证书。则需要进行如下配置，关闭安全检测
      },
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

2、.env

关于 .env的文件是在项目的根目录创建，但是你要知道关于 .env文件是用来干嘛的。

.env 全局默认配置文件，无论什么环境都会加载合并,所以可以放置一些我们全局所需要的变量

.env.development 开发环境的配置文件

.env.production 生产环境的配置文件

在这里插入图片描述
env文件并不是只能配置这三个，而是根据你不同的需求来配置的，这个我在另一篇中有介绍，感兴趣可以看看https://blog.csdn.net/weixin_44191425/article/details/120165789?spm=1001.2014.3001.5501

3、.browserslistrc

这个是前端工具之间共用目标浏览器和 node 版本的配置文件，它一般被下述工具使用

Autoprefixer
Babel
post-preset-env
eslint-plugin-compat
stylelint-unsupported-browser-features
postcss-normalize
1
2
3
4
5
6

改配置我们有两种方式，第一种就是在package.json里面配置

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}
1
2
3
4
5
6
7
8

第二种就是在根目录新建一个.browserslistrc的文件，然后在文件里面配置

# 以#号开头，可以写注释
# 比如说写个注释
> 1%
last 2 versions
not dead
1
2
3
4
5

在这里插入图片描述
不配置默认为：> 0.5%, last 2 versions, Firefox ESR, not dead
在当前目录下查询目标浏览器 npx browserslist

4、.eslintrc.js

由于每个人都有自己的开发习惯，而且每个人不一定能保证自己的开发习惯是一定符合规范的，所以为了避免出现层出不穷的bug或者waring，于是我们就配置一个eslint校验的规则来统一规范

.eslintrc 放在项目根目录，则会应用到整个项目

注意：如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件

在这里插入图片描述
详细的配置见官方文档 http://eslint.org/docs/user-guide/configuring，具体的配置根据你的开发需要自己配置，我这里简单配置一下

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": "off"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、babel.config.js

babel是一个js的编译器，由于vue项目中普遍是采用es6的写法，但是为了向下兼容旧版本的浏览器，我们需要将es6已经es+转换成es5，所以需要配置一下这个文件

同样在根目录新建这个文件
在这里插入图片描述

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
1
2
3

5、README.md

改文件主要用来记录该项目的详细信息，比如如何打包，打包命令等等，以便于其他人来接手项目或者参与项目的时候能够快速加入开发。

基本文件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/104329