跟着截图10个环节顺利用npm vue-cli（脚手架）搭建属于自己的vue项目环境

1.在node官网下载并安装node(建议3.0以后的版本),选定指定目录后，安装node一路next即可。
      node网址:https://www.cnblogs.com/hackyo/p/8110951.html
     安装完检查:在cmd 下输入node -v，如果出现版本号就证明安装成功了;
      
 
2.安装淘宝镜像(安装依赖)：npm install -g cnpm --registry= https://registry.npm.taobao.org  检查： npm -v

     提示：至于是选择npm还是选择cnpm安装看个人需要。本质上没有区别。安装的依赖都相同。只是两种安装途径。注意，如论这里选择哪种，后面的环节都要保持相同。
 
3.安装webpack:npm install webpack -g  检查： webpack -v
        
        

       
 
4.安装vue 脚手架：npm install vue-cli -g   检查：vue -V
        

       
        
  通过以上四步，我们需要准备的环境和工具都准备好了
5.接下来就开始使用vue-cli来构建项目:
     5.1 通过DOS命令进入存放项目的目录
     
     5.2在该目录下安装项目依赖：安装vue脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。
     $ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称：必填且英文名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述:可忽略
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者：可忽略
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) 
? Install vue-router? Yes  --------------------- 是否安装Vue路由，选择yes（页面路由跳转会用到）
? Use ESLint to lint your code? (Y/n) n 
? Use ESLint to lint your code? No  ---------------------是否启用eslint检测规则，这里个人建议选no（否则开发时，报错会非常多，严格模式开发另说）
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

创建完的项目路径：创建完之后，你会发现你的项目文件夹里多个 node_modules(项目依赖)这个文件夹
 
6.文件说明：

 7.启动项目，输入：npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”。
 
 
注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。
8.热加载，执行 npm run dev让其自动启页面:
     1.在项目目录中的config文件夹中找到index.js并用编辑器打开。
     
     2.找到里面的 dev 方法, autoOpenBrowser: true,由默认的false改成ture。8080端口号也是在这里修改。
        
       3.在项目中按住shift+右键，选择  在此处打开命令窗口,会快速弹出运行窗口
       

     
    4.再次执行 npm run dev 命令。你会看到惊喜哦!!!
9.请求数据：数据请求有三种方式vue-resource(vue3.0不在维护了),fetch(原生js范畴)和axios(推荐项目使用)
     我这里用的是vue-resource。如果您需要向服务端请求数据，您首先要安装vue-resource。
       vue-resource简介：是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
     9.1在项目文件中进入通过shift+鼠标右键键入终端：
     
     9.2在项目终端中项目目录里(D:\vue-misic>)，然后使用以下命令进行安装:npm install vue-resourse --save。
    
     

    
     --save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了 "vue-resource": "^1.5.1",的配置。
     
     通过以上步骤，我们已经安装好了vue-resource，
     9.3在vue-cli中使用vue-resourcse，需要在main.js文件中导入并注册vue-resource:
     
     import VueResource from 'vue-resource'
     Vue.use(VueResource)
     9.4项目调用之get请求：
     
     9.5项目调用之POST请求:
     
         

10.运行vue项目文件：在.vue内按住ctrl+`,调出命令行，然后执行 npm run dev命令。