(总感觉自己的环境配置好像有问题,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,垃圾的理论
1 var path = require('path') 2 var webpack = require('webpack'); 3 4 module.exports = { 5 entry: './src/main.js', 6 output: { 7 path: path.resolve(__dirname, './dist'), 8 publicPath: '/dist/', 9 filename: 'build.js' 10 }, 11 module: { 12 loaders: [ 13 { 14 test: /\.vue$/, 15 loader: 'vue-loader' 16 }, 17 { 18 test: /\.js$/, 19 loader: 'babel-loader', 20 exclude: /node_modules/ 21 }, 22 { 23 test: /\.css$/, 24 loader: 'style-loader!css-loader' 25 }, 26 { 27 test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 28 loader: 'file-loader' 29 }, 30 { 31 test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/, 32 loader: 'file-loader', 33 query: { 34 name: '[name].[ext]?[hash]' 35 } 36 } 37 ] 38 }, 39 resolve: { 40 alias: {vue: 'vue/dist/vue.js'} 41 }, 42 devServer: { 43 historyApiFallback: true, 44 noInfo: true 45 }, 46 devtool: '#eval-source-map' 47 } 48 49 if (process.env.NODE_ENV === 'production') { 50 module.exports.devtool = '#source-map' 51 // http://vue-loader.vuejs.org/en/workflow/production.html 52 module.exports.plugins = (module.exports.plugins || []).concat([ 53 new webpack.DefinePlugin({ 54 'process.env': { 55 NODE_ENV: '"production"' 56 } 57 }), 58 new webpack.optimize.UglifyJsPlugin({ 59 compress: { 60 warnings: false 61 } 62 }), 63 new webpack.LoaderOptionsPlugin({ 64 minimize: true 65 }) 66 ]) 67 }
main.js引入整个 Element
1 import Vue from 'vue' 2 import ElementUI from 'element-ui' 3 import 'element-ui/lib/theme-default/index.css' 4 import App from './App.vue' 5 import VueRouter from "vue-router" 6 import VueResource from 'vue-resource' 7 8 //开启debug模式 9 // Vue.config.debug = true; 10 11 Vue.use(ElementUI) 12 13 Vue.use(VueRouter) 14 Vue.use(VueResource) 15 16 // new Vue({ 17 // el: '#app', 18 // render: h => h(App) 19 // }) 20 21 // 定义组件, 也可以像教程之前教的方法从别的文件引入 22 // const First = { template: '<div><h1>我是第 1 个子页面</h1></div>' } 23 import firstcomponent from './component/firstcomponent.vue' 24 import secondcomponent from './component/secondcomponent.vue' 25 26 // 创建一个路由器实例 27 // 并且配置路由规则 28 const router = new VueRouter({ 29 mode: 'history', 30 base: __dirname, 31 routes: [ 32 { 33 path: '/first', 34 // component: First 35 component: firstcomponent 36 }, 37 { 38 path: '/second', 39 component: secondcomponent 40 } 41 ] 42 }) 43 44 // 现在我们可以启动应用了! 45 // 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。 46 const app = new Vue({ 47 router: router, 48 render: h => h(App) 49 }).$mount('#app') 50 51 // new Vue({ 52 // el: '#app', 53 // render: h => h(App) 54 // })
以上代码便完成了 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,或者是其他的文件,插件代码,这只是我初步的认识,后续补充。。。