vue环境配置---dos指令

(总感觉自己的环境配置好像有问题，webpack.config.js里面的文件信息总是需要修改，而别人的好像就不需要，待定，但是现在的是可以使用的)

 

http://www.jianshu.com/p/5ba253651c3b#

 

http://www.cnblogs.com/ganmy/p/6029774.html

 

http://element.eleme.io/#/zh-CN

 

通过上面三个网址总结出来的能开多个服务的dos指令：

（1）安装node.js（直接在官网下载）

（2）npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装...（淘宝镜像）

（3）cnpm install webpack -g

（4）npm install vue-cli -g

上面的操作都是在C盘中默认的位置进行的，而且都是全局安装，下面是进入自己的项目目录中

（5）cd 目录路径

（6）vue init webpack-simple 工程名字<工程名字不能用中文>（-simple很重要）

（7）cd 工程名字

（8）npm install（很重要，注意不是cnpm）

（9）cnpm install vue-router vue-resource --save（安装路由模块和网络请求模块）

　　　注意现在可以简化为 npm install vue-router vue-resource --save

　　　最后还是可以简化为 npm i vue-router vue-resource -S(现在是保存在dependencies)

（10）npm i element-ui -S（安装e了么UI框架，理论上还是有其他UI框架可以装进来的，现在还不知道咋整的）

（11）cnpm install style-loader css-loader file-loader --save-dev

　　　同理现在可以简化为 npm install style-loader css-loader file-loader --save-dev

　　　还是可以简化为最简单的 npm i style-loader css-loader file-loader -D

（12）npm run dev（注意是npm而不是cnpm）

 

上面就是全部的dos指令，1--4只用一次就好了，后面再新建项目的时候，从第五步开始就好了。

如果是直接打开项目的话，只要进入cd到项目中，然后npm run dev 就好了。

 

修改webpack.config.js（***每次修改配置文件，都要退出，重新运行一下程序***）

总之现在，能用npm就用npm，而不是用cnpm,垃圾的理论

 

var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {vue: 'vue/dist/vue.js'}
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

 

 

main.js引入整个 Element

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
import VueRouter from "vue-router"
import VueResource from 'vue-resource'

//开启debug模式
// Vue.config.debug = true;

Vue.use(ElementUI)

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

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

// 定义组件, 也可以像教程之前教的方法从别的文件引入
// const First = { template: '<div><h1>我是第 1 个子页面</h1></div>' }
import firstcomponent from './component/firstcomponent.vue'
import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/first',
      // component: First
      component: firstcomponent
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

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

 

 

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

（13）npm install babel-plugin-component -D

修改.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

（14）npm run build（编译）

　　主要的文件是index.html与dist/build.js，当然一张网页不会是这么简单的，还会有sass,css,img,或者是其他的文件，插件代码，这只是我初步的认识，后续补充。。。