vue脚手架(vue-cli)安装

分手后的思念是犯贱 2021-09-17 02:12 633阅读 0赞

vue脚手架是一套整合了webpack、启动配置、代理服务等基础功能的前端架构，最大的好处就是可以更规范有效的开发vue项目。使用vue脚手架前，最好能了解基本的nodejs、webpack的知识，接着将一步步实现vue脚手架的搭建。

安装nodejs

访问nodejs官网：https://nodejs.org/en/ 下载当前最稳定的版本安装。安装完成后能使用命令行可以打印版本号表示安装成功。

  1. $ npm -v

安装cnpm镜像

为什么用cnpm？因为cnpm是淘宝关联npm镜像，下载依赖包的速度会更流畅。安装命令行：

  1. $ npm install -g cnpm --registry=https://registry.npm.taobao.org

vue安装

安装命令行：

  1. $ cnpm install vue

安装vue-cli脚手架构建工具

安装命令行（建议全局安装）：

  1. # 全局安装 vue-cli
  2. $ cnpm install -g vue-cli

到这一步为止，搭建vue脚手架的基本需求已经完成。

创建vue脚手架项目

创建命令行：

  1. # my-vue-cli 即您的项目名称
  2. $ vue init webpack my-vue-cli

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70

（贴士）Use ESLint to lint your code？这项我配置为No，即不使用该规范来校验代码，否则开发时有可能会报出很多错误或警告。

安装完成后，执行启动命令即可看到vue脚手架的展示页：

  1. $ cd my-vue-cli
  2. $ npm run dev

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1

打开浏览器访问：http://localhost:8080，就能访问到展示页了。

（贴士）vue脚手架仅仅一个很基础的前端架构，要用来开发一个完整的前端项目是远远不够的，还需要组件库、服务代理、axios访问配置、路由配置、vuex搭建、图标管理、token管理等一系列功能。

发表评论

表情：
评论列表 （有 0 条评论，633人围观）

还没有评论，来说两句吧...

相关阅读

    相关 安装vue脚手架

    1. vue2.0 1.vue - V 查看版本，如果出现版本号，之前已经安装过了。如果之前安装的版本是想要的版本，可以直接创建项目 2.npm unins

    我就是我我就是我/ 0 赞/ 50 阅读