创建Vue项目

一、安装Node.js

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

下载完成之后，找到文件所在路径，点击进行安装，直接下一步操作，安装完成之后，打开cmd终端，查看是否安装成功

node -v
npm -v

二、安装cnpm淘宝镜像
npm命令可以使用，打开cmd，下载一些包

但是npm下载各种包默认的服务器在国外,下载速度很慢,有时还会导致一些环境问题

因此我们可以选择从国内的服务器下载包,这要感谢淘宝团队的付出,为国内开发者提供了npm各类包的镜像
下载以安装一个cnmp(淘宝镜像)来加快下载速度：
安装命令
 

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

查看版本命令

cnpm -v

三、安装Webpack（注意安装顺序）

通常使用本地安装，通过当前项目中的node_modules文件夹，查看安装的webpack
本地安装

# 最新版
cnpm install --save-dev webpack 

# version表示版本，需要修改为需要的版本
cnpm install --save-dev webpack@<version>  

注意
使用 webpack 4+ 版本，还需要安装 CLI。

cnpm install --save-dev webpack-cli
或
cnpm install webpack-cli -D

-D参数和–save-dev的作用相同，只是一种简写

全局安装

# 最新版
cnpm install webpack -g

# version表示版本，需要修改为需要的版本
cnpm install webpack@<version> -g

根据自己的开发需求，是否采用全局安装。
一般不使用全局安装 webpack。这会是项目中的 webpack 版本固定，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

四、构建Vue项目

在创建项目之前，需要使用vue-cli脚手架工具进行安装。脚手架工具可以直接生成一个项目的整体构架，帮助开发者搭建Vue.js的基础代码

# 最新版
vue install vue-cli -g

# version表示版本，需要修改为需要的版本
vue install vue-cli@2.9.x -g

Tips：-g表示全局安装，-global的意思

安装完成后，可以执行vue-cli -V或者vue -v命令，查看安装版本号。

在电脑任意位置创建一个文件夹，通过cd命令到该文件夹下，执行如下命令初始化vue项目：

vue init webpack demoApp

在创建的时候，按照下图操作即可

完成以上步骤之后，在node_models中仍然缺少一些依赖文件，所以此时通过cd命令到项目的路径下，安装全部依赖文件

完成以上的操作步骤之后，就可以来启动咱们的Vue项目啦~

npm run dev
或者
cnpm run dev

五、访问Vue项目

打开浏览器输入IP地址，即可看到效果，后续的开发工作可以采用VsCode或者Webstorm，当然笔者更青睐于Webstorm，虽然Vscode更加容易上手，具有轻量级的特点，Webstorm更具有专业性。接下来的开发工作就交给你啦~