vue脚手架(vue-cli)安装 分手后的思念是犯贱 2021-09-17 02:12 405阅读 0赞 vue脚手架是一套整合了webpack、启动配置、代理服务等基础功能的前端架构,最大的好处就是可以更规范有效的开发vue项目。使用vue脚手架前,最好能了解基本的nodejs、webpack的知识,接着将一步步实现vue脚手架的搭建。 # 安装nodejs # 访问nodejs官网:[https://nodejs.org/en/][https_nodejs.org_en] 下载当前最稳定的版本安装。安装完成后能使用命令行可以打印版本号表示安装成功。 $ npm -v # 安装cnpm镜像 # 为什么用cnpm?因为cnpm是淘宝关联npm镜像,下载依赖包的速度会更流畅。安装命令行: $ npm install -g cnpm --registry=https://registry.npm.taobao.org # vue安装 # 安装命令行: $ cnpm install vue # 安装vue-cli脚手架构建工具 # 安装命令行(建议全局安装): # 全局安装 vue-cli $ cnpm install -g vue-cli 到这一步为止,搭建vue脚手架的基本需求已经完成。 # 创建vue脚手架项目 # 创建命令行: # my-vue-cli 即您的项目名称 $ 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脚手架的展示页: $ cd my-vue-cli $ npm run dev ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1][] 打开浏览器访问:http://localhost:8080,就能访问到展示页了。 (贴士)vue脚手架仅仅一个很基础的前端架构,要用来开发一个完整的前端项目是远远不够的,还需要组件库、服务代理、axios访问配置、路由配置、vuex搭建、图标管理、token管理等一系列功能。 [https_nodejs.org_en]: https://nodejs.org/en/ [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210813/6c2cd9590a8740f18053bebe24304f2a.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1]: /images/20210813/295a6c353ba84f7a8f3c8e959372732c.png
还没有评论,来说两句吧...