Vue-cli脚手架新手教程入门

直接切入正题

一.安装

因为Vue全家桶都需要nodejs环境支持的所以我们需要先从官网上下载最新版本的nodejs

链接如下：https://nodejs.org/en/直接下载电脑对应的版本即可。
安装完之后打开电脑的cmd命令行（mac or linux 用户同理）。
首先需要安装webpack工具（webpack用来打包我们的项目）
运行命令：

npm install webpack -g 

等待下载安装完毕即可
如果速度较慢可以安装cnpm的国内淘宝映像，网络速度因人而异。
安装完webpack工具之后可以使用

webpack -v

命令查看电脑是否正确安装完成
接下来使用命令

npm install vue-cil -g

下载 vue脚手架工具
同理安装完毕之后使用

vue -V

命令查看是否正确安装。
至此vue手脚架工具安装完毕

二.小试牛刀

接下来在自己的项目文件夹里右键git bash here工具（当然你也可以使用cmd切换到你的项目文件夹里,如果有耐心的话）

在命令行里运行

git bash

其中vueapp是我起的项目文件名称，可以随意更改

之后再运行

npm install 

这句话的意思是安装下我们项目需要的nodejs插件以保证项目能正常运行
下面的几个问题可以先行回车代替后面有时间我们再详细讨论
这里需要注意的是，我们的项目文件夹最好不要用中文，我为了演示方便才没改，这里一定要注意下。

三.查看项目

我们的项目文件已经生成好了，但是我们似乎又无处下手，这么多的文件我们到底在哪里写我们的代码呢？

捕获1.PNG

这里给大家分析一下
build文件夹主要是用来对我们的项目打包来进行的一些设置
config文件夹是用来对我们的测试环境的设置
node_modules则包含了我们项目使用的nodejs插件
src则是我们的代码文件夹 我们的一切代码都要卸载src文件夹里面
剩余的我就不介绍了都是一些项目配置文件以及单元测试文件选项

四.运行本地开发环境

进入我们的vueapp文件夹中然后在git bash键入

npm run dev 

稍等片刻后

捕获3.PNG

我们可以打开浏览器看到我们的项目了

捕获4.PNG

五.打包发布

在本地上测试我们的项目肯定还是不够的，我们的web项目肯定是要部署到服务器里面的
首先我们需要打开config/index.js将里面的assetsPublicPath设置为assetsPublicPath: '/'
然后在命令行里运行

npm run build

稍等片刻会发现我们的项目文件夹里多了个dist文件夹

捕获11.PNG

理论上文件是可以直接扔到服务器的项目根目录直接用的，但是发现存在目录路径问题
打开index.html文件
发现格式很乱 使用vscode的格式化快捷键shift+alt+f 格式化代码

捕获222.PNG

然后在三个