Windows下安装Vue-cli

环境搭建

安装 Node.js

从Node.js 官网上下载 Node.js for Windows(x64)的文件，一路“下一步”安装完成。注：

• 使用 Win+R 输入 cmd 打开命令行输入node -v，出现版本号，则说明安装成功。

• 包管理工具npm在安装 Node.js 时会一起安装好。

安装 Webpack

在命令行中输入npm install webpack -g。

注：

• 安装完成后webpack -v，出现版本号，则说明安装成功。
  

• 若出现如下报错，执行npm install webpack-cli -D，安装 webpack-cli。
  

安装 Vue-cli

在命令行中输入npm install -g @vue/cli。

注：

• 安装完成后输入vue -V(大写 V)，出现版本号，则说明安装成功。

项目准备

我的项目都是使用的 Webstorm 搭建的

我的工程地址在C:\User\s5\WebstormProjects，所以在命令行中执行：

cd WebstormProjects
vue init webpack projectname

注：

• projectname 为项目名。

• package.json配置过程：（建议：除了Use ESLint to lint your code?选no，其他配置全部回车就好。）

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 2.x use: vue init webpack
? Project name (projectname) ---------------------项目名称
? Project name projectname
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectname".

目录结构：

项目运行

命令行进入刚才创建的项目目录，然后执行命令：

cd projectname
npm run dev

此时可以在浏览器中输入localhost:8080 查看到实例页面。

参考Vue2.0 史上最全入坑教程