Windows下安装Vue脚手架(详解)

简介

网上现有的安装教程，有的有不少坑，有的不够详细，因此打算整理一下，也方便本身之后查看

安装Node.js

1.下载地址

https://nodejs.org/en/
NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题

2.下载好后运行

3.接受条款

4.换目录

5.以后一路Next下去就安装好了

安装Vue脚手架

1.使用淘宝镜像安装cnpm

npm install -g cnpm –registry=https://registry.npm.taobao.org

注：国外的源下载会很慢，只要你慢你就能够换成国内淘宝的源，加**–registry=https://registry.npm.taobao.org** 便可

2.出现如下画面安装成功

cnpm -v

3.安装webpack

npm install -g webpack

4.安装webpack-cli

npm install -g webpack-cli

5.出现如下画面安装成功

webpack -v

6.安装Vue-cli

npm install -g vue-cli --registry=https://registry.npm.taobao.org

7.出现如下画面安装成功

vue -V

若是你作到了这一步，那么，恭喜你的环境已经搭好了！

初始化项目

这一步是为初学者开启第一个vue项目，若是只要安装可不作这步

1.进入文件夹

mkdir myproject
cd myproject

2.初始项目

veu init webpack vuedomo

如下这几步的含义

• Project nanme: 回车(项目名)
• project description： 写上描述，或者回车(项目描述)
• Author： 写做者名(若是配置过git会自动获取git的name)
• Install vue-router?: 选择Y(官方推荐的路由插件)
• User ESLint to lint your code?: 选择N(是否启用eslint检测规则)
• Set up unit tests?: 选择N(是否要测试)
• Setup e2e tests with Nightwatch?： 选择N(用Nightwatch设置E2E测试？)
• Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) ： 回车
  
  耐心等待项目构建成功

3.出现如下画面安装成功

dir

4.启动应用

cd vuedomo
npm run dev

5.启动成功

查看http://localhost:8080

出现如下画面，恭喜，项目建立完成！

项目结构

完成！