Vue 项目创建1. 环境依赖学习 Vue，记录一下 Vue 初始化项目的一些常用框架。刚开始学习前端，此篇幅仅笔者

1. 环境依赖

学习 Vue，记录一下 Vue 初始化项目的一些常用框架。

刚开始学习前端，此篇幅仅笔者个人记录用。

1.1 Vue 默认版本

2022.2.7 默认 vue3 成为了默认版本。

// 笔者安装方式均为 npm, 没有安装 yarn
npm i vue 默认安装的是 vue3版本了。
可以使用 npm i vue@2 安装 vue2 版本，如果创建 Vue 项目，一般是 vue cli 来安装了

1.2 Vue CLI

vue-cli 最新版本同样为 vue-cli 4, 但是vue-cli是向下兼容的，因此直接安装即可

// 安装方式
npm install -g @vue/cli

1.3 node.js

在下载项目存在旧版本 sass 依赖时，如果你的 node 版本太高的话就会报不兼容错误。

sudo npm install -g n // 安装 n 管理工具
sudo n 14.17.3 // 选择要按照的 node 版本号

2. 创建项目

cd Desktop
vue create vue_demo

vue-cli 创建选择一个 vue2 版本的项目

2.1 vue-router

Vue 3 项目， npm i vue-router
Vue 2 项目， npm i vue-router@3

2.2 axios

npm install axios --save

2.3 less

npm install less less-loader --save-dev

2.4 vuex

Vue 3 项目， npm install vuex --save
Vue 2 项目， npm install vuex@3 --save

2.5 vant

// 如果是移动端项目开发，一般会安装 vant UI组件库

Vue 3 项目，安装最新版 Vant npm i vant 
Vue 2 项目，安装 Vant 2 npm i vant@latest-v2

// 按需引入
在基于 `vite`、`webpack` 或 `vue-cli` 的项目中使用 Vant 时，推荐安装 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 插件，它可以自动按需引入组件。

1. 通过 npm 安装 npm i unplugin-vue-components -D

2. 在 `vue.config.js` 文件中配置插件：
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

2.6 element-ui

// 如果是后台管理系统，一般会引入 element-ui 或者 iView

npm i element-ui // 安装 emelent-ui

// 按需引入

1. 安装 babel-plugin-component：
npm install babel-plugin-component -D

2. 修改 babel.config.js
module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

3. 插件篇幅

3.1 JavaScript (ES6) code snippets

ES6语法智能提示，以及快速输入。比如输入 clg 然后回车，可以得到一个console.log。

3.2 Path Intellisense

作用：自动提示文件路径，支持各种快速引入文件, 如果标签中

eg <img src="./" alt="">

不提示路径，不妨试试这个插件

4. 移动端项目配置

4.1 vconsole

移动端调试工具，开发环境下可以开启 vconsole

// 安装
npm install vconsole --save 

// 使用
import vConsole from 'vconsole'

// 开启关闭 vconsole
let vconsole = new vConsole();
export default vconsole;

4.2 生产环境删除`console.log`

开发调试环境下，我们有时候会添加了大量的 clg 而忘了删除，因此可以使用插件，生产环境下将所有的console.log清除掉

// 安装 babel-plugin-transform-remove-console 插件
npm add babel-plugin-transform-remove-console -D

// 配置 babel.config.js 每次更改需要重新启动本地服务才会生效
const prodPlugin = []

// 生产环境，则自动清理掉打印的日志，保留error 与 warn
if (process.env.NODE_ENV === 'production') {
    prodPlugin.push([
        'transform-remove-console',
        {
            exclude: ['error', 'warn']
        }
    ])
}

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ...prodPlugin
    ]
}

文章

juejin.cn/post/712336… // Vue 插件推荐

Vue 项目创建