博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue脚手架的搭建
阅读量:5826 次
发布时间:2019-06-18

本文共 888 字,大约阅读时间需要 2 分钟。

一、安装并测试node.js

  • 前往下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步安装;
  • Windows+R快捷键打开cmd窗口,输入node -v出现版本号,即安装成功!

图片描述

二、安装vue.js

  • 使用npm安装
  • npm: npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题
  • 由于 NPM 安装速度慢(服务器在国外),这里使用淘宝的镜像及其命令 cnpm
  • 安装淘宝的镜像:
  • 打开cmd命令框,输入
  • npm install -g cnpm –registry=https://registry.npm.taobao.org
  • 在命令框输入
  • cnpm install vue
  • vue安装完成

三、搭建脚手架

  • 全局安装vue-cli
  • 打开cmd命令框,输入
  • cnpm install -g vue-cli

搭建测试

  • 新建一个vue项目
  • 打开cmd命令框,输入 cd XXX,打开项目文件路径
  • 打开cmd命令框,输入 vue list ,查看可以使用的模板

图片描述

  • 打开cmd命令框,输入 vue,查看命令描述
  • 接下来,在命令框运行 vue init webpack test, 这里的test是项目的名字,接下来会有一些初始化的设置,其中vue-router是路由,ESLint为ES6的代码风格检查器,其他的可以回车跳过或者选择no
  • 安装完模板后会发现在vuedemo文件夹下面多了一个test文件
  • cd到test文件夹下,运行cnpm install,安装依赖
  • 启动 npm run dev

图片描述

  • 到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了
  • 另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的"/"改成"./"

附:相关文件介绍

图片描述

项目完成之后,在命令框输入 cnpm run build,会生成一个dist文件夹,将文件夹打包放到服务器

转载地址:http://cosdx.baihongyu.com/

你可能感兴趣的文章