Vue-cli的安装与基本操作

Vue-cli的安装与基本使用

安装以及脚手架的搭建

全局安装

可以通过 npm 或则 yarn进行全局安装

通过npm进行全局安装

npm install -g @vue/cli

通过yarn进行全局安装

yarn global add @vue/cli

检测是否安装成功

vue -V		//注意是大写 V

出现以下信息就是安装成功了

@vue/cli 4.2.3

使用脚手架创建项目

vue create 项目名称	

注意：vue create .表示在当前目录直接创建项目

输入vue create demo该指令后，如下图显示

一开始会出现

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

建议选择大写的Y ，即国内的淘宝源

然后会显示使用 npm 还是 yarn 下载，建议选择 yarn ，毕竟比较快

点击回车键后会出现以下选项

预设配置名那一项需要先进行 自定义配置 ，最后再命名就可以出现了，下次就可以直接根据 预设的配置名 直接进行配置

删除预设值或更改默认下载引擎

可以去 c盘的用户目录里面寻找一个名字为 .vuerc的文件，里面存放着各种配置信息

（亦可删除 .vuerc 文件重新运行 vue create xx 选择配置）

---

接着vue create xx回来，按上下键进行切换，选择自定义配置，也就是 Manually，点击回车键进入，出现以下信息

 (*) Babel															//将es6转变为es5
 ( ) TypeScript													//比javascript更高级一点 
 ( ) Progressive Web App (PWA) Support 		//优化前端项目的功能组合
 ( ) Router															//页面之间的转换，即 路由
 ( ) Vuex														//组件间信息交互，单例模式传值
 ( ) CSS Pre-processors								//预编译语言
 (*) Linter / Formatter						//格式化前端代码，规定代码格式 eslint
 ( ) Unit Testing											//用于测试
 ( ) E2E Testing											//用于测试

按a进行全选，上下方向键进行移动，点击空格进行选中，点击回车键进行提交

可以根据自己的需求选择，我选了 Babel、Router、Vuex、Css Pre-processors与Linter / Formatter，够用了，点击回车键

选 N 就行，后期想用的话也就改一个配置项的事，下一步

选第一项，回车下一步

选第三个，标准规范，回车下一步

全部选中，保存后会进行检测，git 提交后会进行检测与修复，回车下一步

选择第一项，将之前的配置信息放在额外的配置文件里面，回车下一步

保存配置是否为将来的项目使用，想保存可以点 y ，再起一个名字就可以保存好了，下次直接使用预设名就可以直接搭建项目了，这里我选择 n，因为我保存过了

回车下一步，就可以开始下载了，等待下载完成就可以搭建好项目了

以上就是项目的搭建

生成的项目目录

---

Vue-cli 使用时候遇到的各种问题

eslint检测问题

当保存的时候，与之前下过了格式化插件起了冲突，导致一保存就会自动添加分号、函数名后删掉空格，

下载 prettier 与 ESLint 插件，在settings.json文件进行以下配置

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "semi": false,
    "singleQuote": true
  }
},
"git.suggestSmartCommit": false,
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //配置eslint
    "eslint.autoFixOnSave": true,
    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     },
     //为了符合eslint的两个空格间隔原则
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

以上就可以解决了

---

关闭eslint检查，浏览器出错遮罩

创建 vue.config.js文件

module.exports = {
  devServer: {
    overlay: { // 关闭遮罩层
      warnings: false,
      errors: false
    }
  },
  lintOnSave: true, //直接关闭eslint检查
  configureWebpack: {
    resolve: {
      alias: {	//给某个目录命名，方便引用
        assets: "@/assets",
        con: "@/components",
        views: "@/views"
      }
    }
  }
};

关闭eslint某一个验证

假设想关闭以下某一个验证

就可以复制右边的错误表述，去 eslint 的配置文件，设为 off 直接关闭，找到.eslintrc.js

rules: {
  " quotes": "off",//关闭引号验证
   "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
   "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
}

无论更改什么配置文件，都需要重启服务器，才可以生效！

proxy代理配置

同样是vue.config.js文件

devServer: {
  overlay: { // 遮罩层
    warnings: false,
      errors: false
  },
    proxy:{ //代理
      "/api":{
        target:"http://m.maoyan.com",
          changeOrigin:true,
            pathRewrite:{
              "^/api":""	//利用正则将/api改为空
            },
      }
    }
},

axios.get("/api/ajax/movieOnInfoList?token=&optimus_uuid=C65FF030043711EAA90DB72AF81017842766AFA17B0B4FC182E45BB02A3963B2&optimus_risk_level=71&optimus_code=10").then(res=>{
  console.log(res)
})

以上相当与请求

http://m.maoyan.com/api/ajax/movieOnInfoList?token=&optimus_uuid=C65FF030043711EAA90DB72AF81017842766AFA17B0B4FC182E45BB02A3963B2&optimus_risk_level=71&optimus_code=10

然后将 /api 改为空，变成

http://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=C65FF030043711EAA90DB72AF81017842766AFA17B0B4FC182E45BB02A3963B2&optimus_risk_level=71&optimus_code=10

就可以通过配置代理的方式进行跨域请求数据

---

样式相关问题

在app.vue文件的样式设置默认在最下面，默认覆盖从其他单文件组件传过来的相同样式

scoped

实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块

<style lang="scss" scoped>
#hi {
  height: 100px;
  p {
    color: red;
  }
}

生成的页面

样式为

效果为

但是，如果我还想影响到 子组件里面的子代元素 的样式，就需要使用穿透

穿透

::v-deep

之前如是加载的事 dart-sass 的话，就需要在标签上加上::v-deep，即可实现穿透效果

<style lang="scss" scoped>
#hi {
  height: 100px;
  ::v-deep p {
    color: red;
  }
}
</style>

/deep/

之前如是加载的事 node-sass 的话，就需要在标签上加上/deep/，即可实现穿透效果，用法与::v-deep一样，就不细讲了

---

以上就是本人的总结，如有不对，欢迎指出~