VUE vue-cli 步骤及配置文件解释

1：vue-cli 是vue的脚手架工具  并初始一个脚手架自带网站模板
      安装脚手架 ：
          首先安装node  Node.js 安装包及源码下载地址为：Download | Node.js。
           如何安装 菜鸟教程上有。这个就跟下载一个软件一样很简单  地址：node.js 安装
  安装好了一定要看一下是否是全局变量
       检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命           令"path"，     输出如下结果：

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

 

 然后安装vue-cli 脚手架

npm install vue-cli -g

安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

2：什么是脚手架？
      文字解释：脚手架就有点类是建筑的一个承重墙以及框架下列分别用图说明
                        

 

package-lock.json是一个缓存文件，缓存的是依赖文件来源，在第二次生成的时候就会使用缓存加载速度更快

注意：src文件夹中还有特别说明

   

 3：项目的其他配置
     1：让项目运行时候就自动打开浏览器
       package.json 在运行npm run serve 启动的是“scripts” 对象中 加上一个  --open
        "serve": "vue-cli-service serve  --open"
     2: eslint 校验功能关闭 （因为在开发时候 有些测试，这个可以在开发时候关闭 在等正式上线在开启即可）
       而且这个需要在vue.confg.js中配置（这个在下面会说）  lintOnSave:false  既可以关闭语法校验
      3：配置src的别名
需要在在跟目录下新建一个jsconfig.json   [@ 代表是src 文件夹，这样好处在于以后文件过多找的时候方便]
     ｛
        "compilerOptions":{
                "baseUrl": "./",
                "path":{
                        "@/*": ["src/*"]
                }
        },
        "exclude":["node_module","dist"]
        ｝

4: 项目路由分析
vue-router
前端所谓的路由：key value键值对
key:url（）// 这个是文件中路由文件的路径

vue.config.js
        vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写