vue-使用脚手架vue-cli

1.使用vue-cli，要使用node.js,因此需要先安装node.js
2.使用官网下载安装即可
3.安装完成后：
node -v:查看版本
npm -v：查看版本
4.npm就是软件安装的管理工具，随着node.js安装
5.由于node.js的服务器也是在国外，因此可以把npm映射成阿里的一个镜像：
npm install cnpm -g  //不推荐使用cnpm
npm install --registry=https://registry.npm.taobao.org  //推荐换成淘宝镜像
6.npm install vue-cli  -g  :安装vue-cli  ，-g表示全局安装
7.等待安装完成
8.vue list :有内容，则表示安装成功
9.创建一个vue的demo:
    1.新建一个文件夹"myfirstvue"
    2.cd myfirstvue：进入文件夹
    3.vue init webpack firstvue ：使用webpack打包， firstvue为工程的名字
         我的使用 npm init 安装成功
    4.等待安装完成
    5.项目名称：默认即可
    6.项目描述：
    7.使用命令没有安装成功，推荐可以使用idea工具安装

19.vue-cli:脚手架，快速生成一个vue的项目模板

安装命令：

2.cd myfirstvue：进入文件夹
3.vue create firstvue :创建一个vue
4.选择 Vue2 
5.等待安装完成
6.cd firstvue  :进入项目文件夹
7.npm run serve :启动项目

20.vue-cli目录结构：

build文件夹下的内容:为webpack的配置文件，编译用的，自动生成，无需太过关注

config文件夹下的内容：

node_modules文件夹下的内容：为安装的依赖，自动生成，无需太过关注

src文件夹下的内容：为源码的一些东西，开发主要对此部分内容进行增删改查等操作开发

static文件夹下的内容：放一些静态资源

.babelrc:主要为编译的一些规范
.gitignore：忽略git文件的
.postcssrc.js:为css相关的一个配置文件
index.html:这个就是我们的一个首页，一个模板页，实际开发中我们不需要去使用，主要用.vue的内容作为页面，不用.html的内容作为页面

package.json：项目的一个配置文件：
{
  "name": "firstvue",   //项目的名字
  "version": "0.1.0",   //项目的版本
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",   //启动的命令服务
    "build": "vue-cli-service build",   //编译的环境
    "lint": "vue-cli-service lint"
  },
  "dependencies": {  //测试环境需要的依赖
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {  //开发环境需要的依赖
    "@vue/cli-plugin-babel": "~4.5.14",
    "@vue/cli-plugin-eslint": "~4.5.14",
    "@vue/cli-service": "~4.5.14",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

21.src中的内容分析：