参考转载链接：https://www.cnblogs.com/yshang/p/11238513.html
按照参考链接的地址，真实走了一遍，亲测可用，其中涉及运行打包的命令，可在package.json中进行二次配置

1.安装node.js

下载地址：http://nodejs.cn/download/

2.下载安装后查看版本

• 第一种方式 直接windows+R，在cmd中输入node -v
  

  image.png

• 第二种方式，在【开始】的地方找的node.js文件夹，找到Node.js command prompt
  输入node -v 查看版本
  

  image.png
  image.png

3、安装npm

由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v 查看版本

image.png

4、注册cnpm来代替npm

配置命令:npm install cnpm -g --registry=https://registry.npm.taobao.org

image.png
注意：如果你发现你安装成功了，使用cnpm却发现找不到命令，那么就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如";C:\Program Files\nodejs\node_modules"

5、安装vue脚手架vue-cli

命令：cnpm install -g vue-cli
安装成功后可以用vue -V 查看vue版本

image.png

6、cd到对应的目录下初始化vue项目

命令：vue init webpack my-project
输入vue init webpack my-project之后，如果出现相应描述，直接按enter键即可

• Project name 项目名
• Project description 项目名描述
• Author 作者邮箱
• Use ESLint to lint your code? 是否需要ESlist语法检查

• Setup unit tests with Karma + Mocha? 是否需要单元测试 - Setup e2e tests with Nightwatch? Yes是否需要e2e测试
  选择完相应选项直接回车即可

  
  image.png

7.npm install 安装依赖

package.json为项目依赖资源，如果要运行这个项目需要使用npm install 安装依赖项（直接在项目文件夹路径下执行）

8.npm run dev 运行项目

开发时属于热部署状态，代码保存后浏览器会自动刷新，错误提示也非常友好。
在浏览器输入http://localhost:8080/
端口地址根据运行后显示的端口号为准

image.png
例如我的是8082：即输入http://localhost:8082 即可显示以下页面
image.png

9、编译打包 npm run build

会编译打包到项目dist文件夹下，然后我们就可以部署到服务器上（注意：如果你直接打开index.html，可能页面会是一片空白，这是由于你引用的js路径有问题）

10、脚手架目录介绍

image.png