Vue-cli安装/使用

发表于 | 更新于: | 分类于 | | 热度 ℃

vue-cli(vue 脚手架)

  • 在开发得时候用 vue 做开发但是写多了感觉能不能一开始就有现成得不用去配置拿来就能用
  • 真的有 vue-cli vue 脚手架

不说那么多直接开干

  1. 确保电脑有安装 node/npm （不多说不懂去标签 node 找 node 安装）地址
  2. 使用 vue-cli 是以来 webpack 使用得所以安装 webpack 先
    • 以往用 webpack 直接安装就行
    • webpack 4.x 开始要以来 webpack-cli 依赖
    • 全局安装 webpack 和 webpack-cli
    • sudo npm install webpack webpack-cli -g
    • 安装完 webpack -v 看看安装到了没有
  3. 千新万苦终于搞完前面现在安装 vue-cli
    • sudo npm install –global vue-cli
    • 安装完 vue -v 查看版本
  4. 不多说装完直接使用
    • 进入到你要开发的磁盘位置 先去那里就去那里
    • sudo vue init webpack baoge (这个 baoge 就是项目的名字自己定)
    • 然后就到了后面的配置项了
    • Project name (baoge)： —–项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错 Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
    • Project description (A Vue.js project)： —-项目描述，也可直接点击回车，使用默认名字
    • Author ()： —-作者，输入你的大名
    • 接下来会让用户选择：
    • Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
    • Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
    • Install vue-router? (Y/n) 是否安装 vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
    • Use ESLint to lint your code? (Y/n) 是否使用 ESLint 管理代码，ESLint 是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
    • 接下来也是选择题 Pick an ESLint preset (Use arrow keys) 选择一个 ESLint 预设，编写 vue 项目时的代码风格，直接 y 回车
    • Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装 y 回车
    • Setup e2e tests with Nightwatch(Y/n)? 是否安装 e2e 测试 ，我选择安装 y 回车
  5. 不想死的 UseESLint to lint your code 必须输入 n 不然标准模式下会让你痛不欲生（觉得自己代码很他妈规范的就用吧）
  6. 不过即使一开始的时候没有注意到点击了确定开启了 eslint 也不用怕，教你如何关闭 ESLint
    • 在项目中找到 config 文件夹，进入文件夹
    • 找到 index.js 文件
    • 在大概 26 行左右的位置 useEslint:true 会有这么一句命令 改为 false 就好啦 useEslint:false
    • 记住这个东西是用 webpack 执行的如果是开启服务的时候修改请重启一下服务
  7. 还有一个方法可以不用关掉这个 eslint 就是安装插件让它自动的帮你检查格式化
    • 使用的编程软件是 vs code 微软出的
    • 安装什么插件我就不详细说了，点下面链接自己琢磨
    • 插件地址

vue-cli3 开启项目方法

  1. 开启项目(my-project自定义)

    1
    $ vue create my-project

  2. 选择模式 （一般选择第二个）

  • default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
  • Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。
  1. 选择配置（可以多选：使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选项。）
  • TypeScript 支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support PWA 支持。
  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。
  1. 一路按照需求选
  2. 启动项目
  • cd my-project
  • npm run serve
-------------本文结束感谢您的阅读-------------
0%