用Vue-cli从零开始搭建一个Vue项目

依赖工具
在构建一个 Vue 项目前,我们先要确保你本地安装了 Node 环境以及包管理工具 npm,打开终端运行:

查看node版本:node -v

查看npm版本:npm -v
node&npm安装教程

1.通过以下命令全局安装 vue-cli:

npm i -g @vue/cli
Mac全局安装可能需要管理员权限:sudo npm i -g @vue/cli

  1. 想要创建的项目目录地址下执行构建命令:

Vue3:vue create “项目名称”
Vue2:vue init webpack “项目名称”

  1. 等待构建完成后你便可以运行命令来启动你的 Vue 项目:

打开项目目录:cd vue-project
启动项目:npm run serve

style想用less。

在这里插入图片描述

  1. 装依赖:

npm install less less-loader --save-dev

  1. 根目录新建vue.config.js文件
    在这里插入图片描述
    module: {
        rules: [
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },
        ],
    },

在Vue-cli中使用lang="less"时报错:
Module build failed: TypeError: this.getOptions is not a function
在这里插入图片描述
解决:出现这个问题的原因是less-loader版本过高,降级到5.0.0即可

npm install less-loader@5.0.0 --save-dev


版权声明:本文为m0_44963501原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。