vue工程搭建（含mac电脑操作）

vue 搭建（含mac电脑安装）
mkdir vueprojectatom .
环境—————————————————————1、初始化npm init -y 生成package.json
2、安装webpack npm install web pack  - -save-dev一定要加 —save会生成node_modules否则安装不成功

3、安装vue淘宝镜像 npm install -g vue –registry=https://registry.npm.taobao.org
我的是mac电脑，用如下命令sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbo
4、安装vue脚手架 npm install vue-cli -g
mac下命令sudo npm install -g vue-cli 安装结果/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init+ vue-cli@2.9.3added 253 packages in 27.613s
创建——————————————————————————1、根据模板创建项目 vue init webpack 项目名字<项目名字不能用中文>会有一些初始化的设置，如下输入: Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理) Project name (vue-test) 直接回车默认 Project description (A Vue.js project) 直接回车默认 Author 直接回车默认 Use ESLint to lint your code? n pick an eslint preset. 默认Standard setup unit tests with karma + mocha?No(单元测试不需要) setup e2e tests with Nightwatch?No(单元测试不需要)

2、进入项目 
b2a9
打开终端 cd 项目名字安装项目依赖 npm install

3、安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西，–save 是你发布之后还依赖的东西 npm install vue-router vue-resource  - -save4、启动项目 npm run dev5、发布项目 npm run build

---------项目创建准备工作安装vue-router路由用到cnpm install vue-router --save

终端安装axios，数据用到cnpm install axios --save引入axios。修改main.js文件，添加 Vue.prototype.$ajax = axios ，引入axios。
main文件如下
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'

// Vue.config.productionTip = false
Vue.prototype.$ajax = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h => h(App)
  // components: { App },
  // template: '<App/>'

})

修改config/index.js
useEslint: false,

否则会报各种格式错很麻烦的

src目录下创建 router.js用来路由自己创建的vue
router.js内容如下：
import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1.vue'
import View2 from './views/view2.vue'

Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes:[
    {
      path:'/view1',
      component:View1
    },{
      path:'/view2',
      component:View2
    },{
      path:'/*',
      component:View1
    }

  ]

})

src下创建views文件夹，在此文件夹下创建新的view1.vue文件
<template id="">
  <div class="">
    <h1>我是view1</h1>
    <a href="#">我是view1</a>
  </div>
</template>

<script type="text/javascript">
import axios from 'axios'
// 引入axios，请求服务器数据。axios不支持跨域的jsonp请求
  export default {
    name:'view1',
    mounted: function(){
      axios.post('jlb/getslides')
          .then(function(response){
            console.log(response);
          })
          .catch(function(response){
            console.log(response);
          })
    }
  }

</script>

<style media="screen">

</style>

view2同上，自己写

最后npm start即可