创建vue项目

---

前言

创建vue项目的基本配置

一、安装node.js环境

在用Vue.js构建大型应用的时候通常使用NPM安装方法，NPM能更加方便快捷的搭建项目，例如在项目当中我们常常需要安装各种插件以及打包工具等。

1.从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入 node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

有了node.js环境之后我们就可以使用npm命令了，npm是node的包管理器，它是集成在node当中的，所以我们可以直接使用，你也可以通过node -v查看当前npm版本

由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.（推荐使用cnpm）

2.在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功.(警告可以忽略)

二.安装vue-cli脚手架

在命令行中运行命令 npm install -g vue-cli/ cnpm install -g vue-cli，然后等待安装完成。输入vue -V(v大写)查看当前脚手架版本。

这里我安装的是脚手架3，你可以通过npm install -g @vue/cli@你需要的版本号来安装指定的版本。

三.创建vue项目

接下来就可以创建项目了。我使用的是vscode编辑器
1.首先进入自己的项目文件
输入 vue create 项目名进入基础配置页面，我的项目名为music
你可以选择default(默认配置)，与manually(手动配置)，这里我们选择手动配置，回车进入手动配置页面

利用空格键选择你需要的配置
(1).Babel:可以帮我们将 高级的语法转换为低级的语法,比如说你想用es6语法他可以帮你转成js底层语法，使浏览器可以识别这些代码
(2).Router:路由管理器，我们常常在一个网页中点击一个按钮切换当另一个网页，如果这个事件是通过路由转换的话，那么在我们输入网址URL的地方就会有者相应的跳转，那么其实这就是一种路由管理，在vue中我们通过改变路由信息更换不同的组件，达到一个切换的效果。
(3)Vuex:简单的说是一个全局的数据交互工具，在你的项目任何一个地方都可以改变这个数据，并且可以获取这个数据，那么他的优势是什么呢，假设我们有一个经常使用的数据，当我们在很多一个地方想要获取某个数据，又需要这个数据实时更新的那么Vuex将是一个不错的选择，当然事件总线$bus也行，只不过不常用了。
(4)其他的自己看看吧，关于eslinter根据公司或者自己的喜好选择吧，这是一个代码规范规则，里面有许多用于规范代码的配置，也就是说你得按照他的代码规范来写代码不然就会报错，总之有了它你就不能写代码“怂”了。

接着进入下一步

这里就是说你是想把Babel, PostCSS, ESLint, etc.这些配置文件打包放在一个新的文件还是package.js当中去，这里建议放在新的文件中去，因为当我们需要修改时我们直接去我们新建的文件中去。

这里是你是否想要在将来时可以使用你设置的这些配置，这里我选择y，接着进入
给你的这些配置取个名，在你今后每一次创建项目时你都可以选择你这次配置好的文件直接进入下一步操作，接着就等待创建完成了

创建完成后，我们需要进入项目文件

通过命令 npm run serve运行当前项目，成功后你会看见

输入或者点击 http://localhost:8080/你就可以看见你所创建的项目了。

总结

1.node.js环境
2.vue-cli脚手架
3.配置项目

开干开干！！！！