搭建环境2017.11.21

npm install vue-cli webpack -g 如果不行就先安装淘宝镜像 cnpm install vue-cli webpack -g

vue init webpack 项目名

npm install 或 cnpm install

npm run dev

安装Vue全家桶:

npm install vue-router vue-resource vuex --save

修改mian.js

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

import App from './App.vue'

Vue.use(VueResource)
Vue.use(VueRouter)
Vue.use(Vuex)

new Vue({
  el: '#app',
  render: h => h(App)
})

安装pug:

npm install pug pug-loader pug-filters --save

npm install style-loader stylus stylus-loader --save


打开webpack.config.js，配置loader：

module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.pug$/,
        loader: 'vue-html!pug-html'
      },
      {
        test: /.styl/,
        loader: "style-loader!css-loader!stylus-loader"
      },

npm install sass sass-loader node-sass -D

将下面的内容添加进/build目录下webpack.base.conf.js文件：

{
  test: /.scss$/,
  loader: 'style!css!sass?sourceMap'
},
{
  test: /.jade$/,
  loader: "jade"
},
{
  test: /.pug$/,
  loader: 'pug'
},

然后就可以使用了

引入stylus:
cnpm install stylus-loader stylus  -S

引入ELEMENT-UI:

cnpm install element-ui -S

修改 webpack.base.conf.js 的配置

{
   test: /.css$/,
   loader: ‘style!css‘
 },
{
   test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
   loader: ‘file‘,
   query: {
      limit: 10000,
      name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]‘)
    }
}

在 main.js 中引入

import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-default/index.css‘
Vue.use(ElementUI)

如果在main.js中引入css报错，就到index.html中引入

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">