从0开始创建vue2项目

1.安装称手工具 webstorm

官网下载安装，然后重启系统，买个学习账号开始。

WebStorm: The Smartest JavaScript IDE, by JetBrains

其他免费工具：vscode

2.安装Node.js

 官网下载node.js，node -v可以查看安装的node.js版,我这里安装是16.18.0

Index of /dist/v16.18.0/

配置淘宝镜像站 

在cmd窗口，输入命令：npm config set registry=http://registry.npm.taobao.org，配置淘宝镜像站，主要好像是用来提升速度。然后执行命令npm config list查看配置。

npm config set registry=http://registry.npm.taobao.org

3.全局安装脚手架：在cmd窗口输入命令

vue3脚架：

 npm install -g @vue/cli

vue2脚架：

npm install vue-cli -g 

vu2切换到vue3脚架：
 

npm uninstall -g vue-cli
npm install -g @vue/cli

 vue3脚本可以选择创建vue2或者vue3项目如上图最后。安装完之后可以查看对应版本脚手架版本： vue -V

 

 

4.webpack安装

安装webpack ,要先安装node.js node.js自带了软件包管理工具npm 

npm install webpack

//指定vue2稳定版的：

npm install webpack@4.46.0 -g

创建了项目之后在项目文件夹下安装局部：（下面就是在webpacklearn文件夹下安装）

npm install webpack@3.6.0 --save-dev

–save-dev是开发时依赖

webpack是现代javascript应用程序的静态模块打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack更加强调模块化开发管理，文件压缩、预处理等功能，是它附带的功能。
注意：

webpack模块化打包webpack为了可以正常运行， 必须依赖node环境，
node环境为了可以正常执行很多代码，又必须依赖各种包，
依赖各种包就需要npm工具(node packages manager node包管理 ）

5.构建一个新的vue项目

 找一个空目录， 或创建一个空的文件夹，比如vueDemo。然后在cmd窗口里通过cd命令到这个空文件夹目录下，如图：我在E盘下创建了一个vueDemo的空文件夹

在cmd窗口到达项目目录后，继续执行命令vue init webpack vueDemo来新建项目。

 6.用Webstorm运行项目

Open上面创建的项目目录 ，可以在这编辑vue项目代码了。

7.启动项目

打开项目之后，在下面Termimal 输入  npm run serve ,执行完成之后，显示项目浏览地址:http://localhost:8081

9. 项目运行起来了

使用WebStorm创建Vue项目

cmd按3，4步骤配置了cli与webpack之后，启动WebStorm。

扩展：

运行自动打开浏览器：

vue2项目npm run serve自动打开网页为0.0.0.0_Lan.W的博客-CSDN博客

根目录package.json:"serve": "vue-cli-service serve=", 增加--open

{
  "name": "vue2_demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
//...
//...
}

 根目录下：vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        host: "localhost",
        port: 8099,
    }
})

"：no-unused-vars“ 错误

vue2 Eslint 报vue/multi-word-component-names , “no-unused-vars“ 错_Lan.W的博客-CSDN博客根目录下package.json添加

 {
//...
//...

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off"
    }
  },
}