本文共 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/