从0到1创建一个Vue项目

创建前先了解几个知识点：

         node.js

Node是一个让JavaScript运行在服务端的开发平台，使用JavaScript也可以开发后台服务，说明白就是它仅仅是一个平台，我们使用Vue开发必须要安装Node.js。

         npm

npm是Node.js官方提供的包管理工具，它已经成了Node.js包的标准发布平台，用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。我们可以直接使用npm命令下载我们所需要的jar包。

        vue-cli

Vue提供了一个官方的CLI，我们就叫它为脚手架。它为现代前端工作流提供了batteriesincluded的构建设置，只需要几分钟时间就可以运行起来并带有热重载、保存是lint校验，以及生产环境可用的构建版本。简单的说，就是我们使用vue-cli可以快速构建一个完整的Vue项目，直接可以运行的vue本地项目，我们在此基础上直接开发我们所需要的功能和代码即可。

Vue-cli自带了webpack。

安装Vue所需的环境

1.安装node.js

       搜索node.js进入官网(Node.js),直接下载node.js安装即可 安装好后打开cmd控制台命令输入node -v,命令行显示node.js版本就安装成功

2.安装npm

        安装好node.js之后,npm自动安装好 打开cmd控制台输入npm -v，显示版本就安装成功

3.安装vue-cli

        进入cmd控制台,输入命令npm install -g vue-cli 安装vue-cli，安装好后,输入vue -V(注意V大写),显示版本即安装成功

创建Vue项目

1.打开cmd控制台,进入你想创建的项目的目录

进入目录,输入命令:  vue init webpack [project-name]

 project-name是你打算创建vue项目的名称   

 输入命令之后，cmd会自动下载webpack模板，然后出现几个关于项目信息配置的步骤，依次输入即可：

• Project name：项目名称，此处你可以选择更改，直接按下回车键，自动默认为初始输入的项目名称test-project
• Project description：项目描述，自己输入
• Author：项目开发人员
• Vue build：项目构建模式，默认即可，按下回车
• Install vue-router：项目是否安装vue路由，选择yes，进行安装
• Use ESLint to lint your code：是否选择ESLint开发验证功能，新手选择no
• Set up unit tests：是否开启单元测试，建议选择y，在后期开发中一定会用到的
• Pick a test runner：选择开启单元测试，就会有选择测试方式，默认即可
• Setup e2e tests with Nightwatch：是否开启e2e测试，选择no
• Should we run 'npm install' for you after the project has been created

Yes，use NPM：选择这个代表在项目初始化后，会自动使用NPM联机下载项目所需要的插件

Yes，use Yarn：择这个代表在项目初始化后，会自动使用Yarn联机下载项目所需要的插件

No，I will handle that myself：后期手动下载项目所需要插件

网速好，建议选择“Yes，use NPM”，网速不好，建议选择“No，I will handle that myself”

 2.安装插件

创建好Vue项目,cmd控制台进入Vue项目的目录输入命令npm install，开始自动下载项目所需插件。

 插件下载完成后，你讲会看到上面的完整项目目录

 3.运行项目

cmd进入到项目根目录，输入命令 npm run dev，如下图

 浏览器访问http://localhost:8080/，出现下图项目搭建成功，在此基础上开发自己想要的项目即可。