第一步
打开nodejs:https://nodejs.org/zh-cn/官网,
下载并安装,一路下一步,安装完成打开cmd命令工具,输入
node-v
npm-v
查看是否安装正确,如果找不到,请查看系统环境变量里面是否配置了node路径
第二步
更新npm为最新版本,打开cmd命令工具,输入
npm install -g npm
自动更新npm为最新版本,更新成功,输入
npm -v
查看当前npm版本号
第三步
安装vue-cli手脚架
Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。
打开cmd命令工具,输入
npm install -g vue-cli
等待安装结束。
第四步
创建vue项目
打开cmd命令工具{
首先需要cd到存放项目的文件夹路径下。
},输入
vue init <template-name> <project-name>
template-name:
. webpack
. webpack-simple // 一个简单webpack+vue-loader的模板,不包含其他功能。
. browserify // 一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
. browserify-simple // 一个简单Browserify+vueify的模板,不包含其他功能。
. pwa // 基于webpack模板的vue-cli的PWA模板
. simple // 一个最简单的单页应用模板
例如:vue init webpack vue-demo
需要确认一些基本信息
需要注意的是项目的名称不能大写,不然会报错。
Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写。
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git,他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件,Y代表安装,N无需安装,下面的命令也是一样的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended)npm
等待创建完成
第五步
运行vue项目
打开cmd命令工具{
定位到当前项目文件夹目录下
},输入
npm run dev
开启成功;
打开浏览器输入
http://localhost:8080/
查看运行效果