Vue_cli脚手架安装及创建运行一个项目

从零开始安装脚手架并创建运行第一个项目

脚手架的实质就是通过命令生成一个包含一整套vue项目文件结构的项目模板

第一步：下载依赖包（配置环境）

百度搜索node.js或直接进入https://nodejs.org/en/link.
node.js实质为包管理器，就不多介绍了
安装完成后，cmd打开黑窗。输入node -v回车查看 node.js 的版本；再输入npm -v回车查看npm版本

cnpm淘宝镜像

前面说到npm。但是实际操作中不建议使用，因为npm所属于国外网站，或者说里面的包资源属于国外。总之实际开发中用npm很慢。为了解决这个问题，淘宝首先把那些包资源获取了过来，当我们这些国内用户想要使用时就可以通过cnpm直接从国内获取，这样效率就高得多。

安装淘宝镜像

同样的打开黑窗然后输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
最后依旧是输入cnpm -v查看是否安装成功

第二步：安装vue.cli

此时，打开百度搜索vue.cli或直接进入https://cli.vuejs.org/link.，之后就可以查看具体步骤
具体操作如下：
1.可先在黑窗中输入 npm uninstall vue-cli -g，删除旧的cli版本（没有就不必操作此步骤）
2.输入npm install -g @vue/cli命令来安装脚手架；如果使用的是cnpm则输入cnpm install -g @vue/cli。注意：如果是MAC系统，需要在命令前加sudo
3.此时可以访问vue命令或者执行vue --version命令来检查是否安装成功。(可通过执行npm -version或者cnpm -version来检查npm或cnpm安装情况)

第三步：安装webpack

具体安装可参考webpack中文网
https://www.webpackjs.com/guides/installation/link.
webpack是代码编译工具，脚手架就是通过它来编译代码的。它分析你的项目结构，找到JS模块以及其它的一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用。它的实质也是一堆复杂的JavaScript代码和一大堆依赖包

全局安装：

npm install --global webpack或cnpm install webpack-cli -g

本地安装：（推荐）

npm install --save-dev webpack-cli
注意：
对以上安装可通过webpack -v检查安装是否成功

第三步：创建项目

1.在黑窗口中输入vue create projrct-name回车,注意：如果记不住此命令可执行vue -h获取提示，其中projrct-name为项目文件夹名称，可自定义。且创建项目前最好选取合适的路径。
2.此时黑窗口中会出现下图所示情况

通过方向键和空格键选择Manually select features回车
3.紧接着会出现下图所示内容
勾选你所需要的插件（初学者可直接回车下一步或仅仅选取 Babel）
4.当出现下图所示内容时
选择倒数第二项（标准配置）回车
5.
直接回车下一步
6.
选择In package.json回车
7.是否将本次的框架保存为模板
建议输入n，然后回车。如果输入y回车，当你再次创建时，到了第二步就会出现你所命名的项目模板
8.此时等待安装，完成后会出现下图内容

这预示着项目搭建的完成。参照蓝色的命令行，先执行cd project-name回车，跳转到项目文件夹；再执行npm run serve回车，运行项目。
9.当出现图片中所示内容时，可复制链接在本地浏览器搜索打开。此时将会展示项目内容
10.最后Ctrl+C关闭该项目