使用ES6+vue+elementui+webpack搭建简单项目

相关技术：
            1.vue2.0

            2.webpack

            3.element

            4.vue-router

vue2.0环境搭建：
     1.检查本地是否安装node：node -v  

                      

       如果没有安装从node官网上下载相应的node，安装成功即可。

      2.检查本地npm版本：npm -v，如果版本太低可以通过：npm install -g npm进行升级

                     

      3.全局安装webpack：npm install webpack -g

      4.安装vue脚手架：npm install vue-cli -g

      5.新建空文件夹，根据模板创建项目：

             vue init webpack-simple 工程名字<工程名字不能用中文>

             或者创建 vue1.0 的项目： vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

             会有一些初始化的设置，如下输入:

       Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)

       Project name (vue-test)直接回车默认

       Project description (A Vue.js project) 直接回车默认

       Author 写你自己的名字

       Use sass 我的这个demo要用sass所以，我选的yes，大家可以根据自己的需求选择yes or no

在你的项目根目录下，运行：npm run dev之后，会自动打开你的默认浏览器：http://localhost:8080/    效果如下：

          

项目目录：
------------------mydemo

--------------------------src

----------------------------------page

--------------------------------------------------menu1

---------------------------------------------------------------------menuTab.vue

--------------------------------------------------menu2

---------------------------------------------------------------------menuTable.vue

--------------------------------------------------404.vue

--------------------------------------------------home.vue

--------------------------------------------------login.vue

----------------------------------App.vue

----------------------------------main.js

----------------------------------router.js

--------------------------favicon.ico

--------------------------index.html

--------------------------package.json

--------------------------webpack.config.js

然后我们将自己想要的页面什么的慢慢加进去：
1.在根目录下添加favicon.ico图标，我是直接把：mydemo/src/assets下的logo.png改成favicon.ico。

2.在webpack.config.js中添加以下代码：

                                 

                                

然后我们再执行一次：npm run dev

然后就报错啦报错啦：

解决方法：
     执行npm install html-webpack-plugin -save-v

3.在index.html中引入favicon.ico图标：

<link rel="shortcut icon"  href="favicon.ico"/>

4.新增所需vue文件和js文件：

5.引入所需的npm：element-ui、vue-router、font-awesome、style-loader。

最后呢我们一起来看看具体哪些重要的vue文件和js文件代码是什么样子的。

代码来啦：
webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                        // the "scss" and "sass" values for the lang attribute to the right configs here.
                        // other preprocessors should work out of the box, no loader config like this necessary.
                        'scss': 'vue-style-loader!css-loader!sass-loader',
                        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here    我在这里http://www.cnblogs.com/yingzi1028/p/6925387.html

                }
            },
            {
                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|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            favicon: 'favicon.ico', // 在此处添加一行这个，用于webpack生成index.html时，自动把favicon.ico加入HTML中
            inject: true            // 我在这里http://www.cnblogs.com/yingzi1028/p/6925387.html
}) ], resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, 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({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }

package.json

{
  "name": "mydemo",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "xiaoying",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "element-ui": "^1.3.4",
    "font-awesome": "^4.7.0",
    "vue": "^2.3.3",
    "vue-router": "^2.5.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.18.1",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>mydemo</title>
    <link rel="shortcut icon"  href="favicon.ico"/>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>