使用vue-cli开始一个Vue新项目（附：常用配置）

使用vue-cli开始一个Vue新项目，前提是安装好node和npm。

---

项目初始化

1、全局安装vue-cli

npm install --global vue-cli

注：安装一次即可，再开启第二个新项目时可以跳过第一步。

2、创建一个基于webpack模板的新项目

vue init webpack your-project-name //系统会自动创建项目文件夹 your-project-name

注：项目名称不能有大写字母

       项目描述可以不写

Runtime + Compiler: recommended for most users    运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时，已经有推荐了就选择第一个了

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。

Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试

Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 

完成

注：使用默认选项时直接回车即可

项目启动

cd your-project-name

npm run dev

 

项目启动，显示的是 HelloWord.vue 页面

 

一拿到源码，我的习惯就是先删掉无用的代码，然后，想回头看的时候就找不到了。所以，在下面贴一下源码。想看的时候可以来翻翻。

 

components/HelloWord.vue

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li>

        <a

          href="https://vuejs.org"

          target="_blank"

        >

          Core Docs

        </a>

      </li>

      <li>

        <a

          href="https://forum.vuejs.org"

          target="_blank"

        >

          Forum

        </a>

      </li>

      <li>

        <a

          href="https://chat.vuejs.org"

          target="_blank"

        >

          Community Chat

        </a>

      </li>

      <li>

        <a

          href="https://twitter.com/vuejs"

          target="_blank"

        >

          Twitter

        </a>

      </li>

      <br>

      <li>

        <a

          href="http://vuejs-templates.github.io/webpack/"

          target="_blank"

        >

          Docs for This Template

        </a>

      </li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li>

        <a

          href="http://router.vuejs.org/"

          target="_blank"

        >

          vue-router

        </a>

      </li>

      <li>

        <a

          href="http://vuex.vuejs.org/"

          target="_blank"

        >

          vuex

        </a>

      </li>

      <li>

        <a

          href="http://vue-loader.vuejs.org/"

          target="_blank"

        >

          vue-loader

        </a>

      </li>

      <li>

        <a

          href="https://github.com/vuejs/awesome-vue"

          target="_blank"

        >

          awesome-vue

        </a>

      </li>

    </ul>

  </div>

</template>

 

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

 

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

 

Vue.use(Router)

 

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

 

main.js

// 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 App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

 

App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view/>

  </div>

</template>

 

<script>

export default {

  name: 'App'

}

</script>

 

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

 

常用配置

1、http

npm install vue-resource

在main.js中配置import VueResource from 'vue-resource';  然后用Vue.use(VueResource) 方法启用插件。

 

2、axios

npm install axios

使用时引用：import axios from 'axios'

 

 

3、mock

npm install mockjs --save-dev

 

3.1、在 src 目录创建 mock 文件夹，定义 mock 主文件 mock.js ，在该文件中定义拦截路由配置。

3.2、在main.js引用：

import mock from './mock/mock'

 

 

4、jQuery

npm install jquery --save-dev

找到build文件夹下的webpack.base.conf.js文件打开，修改配置：

4.1、加入webpack对象：

var webpack=require('webpack')

 4.2、在module.exports里面加入：

 

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

jQuery: "jquery",

$: "jquery"

})

]

4.3、在main.js中加入import $ from 'jquery',完成jquery的引入

 

 

5、Bootstrap

5.1、官网下载Bootstrap，解压到src/common

5.2、修改webpack.base.conf.js

resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      'bootstrap':resolve('src/common/bootstrap-3.3.7-dist')

    }

  }

5.3、在main.js引用：

import 'bootstrap/css/bootstrap.min.css'

import 'bootstrap/js/bootstrap.min.js'

 

 

6、echarts

npm install echarts -S

使用时引用： import echarts from 'echarts'

 

7、lodash

$ npm i --save lodash

使用时引用： import _ form ‘lodash’

 

 

8、vuex

在main.js引用：

cnpm install vuex -S

import Vuex from 'vuex'

import store from './vuex/store'

Vue.use(Vuex)

 

9、路由

npm install vue-router

在main.js引用：

import vueRouter from 'vue-router'

Vue.use(vueRouter)

 

注：项目搭建时就可以选择安装路由

 

10、使用scss

npm install node-sass sass-loader --save-dev 

未安装会报错，找不到相关的.scss文件

 

另附：