vue脚手架的搭建

一、安装并测试node.js

• 前往node官网下载最新版本的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文件夹，将文件夹打包放到服务器