vue2.0+element+node+webpack搭建的一个简单的后台管理界面

 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图标：

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

router.js

import Vue from "vue"
import VueRouter from "vue-router"

// 引入组件

import login from './page/login.vue'
import home from './page/home.vue'
import notFound from './page/404.vue'
import menutab from './page/menu1/menuTab.vue'
import menutable from './page/menu2/menuTable.vue'
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

let routes = [{
        path: '/login',
        component: login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: notFound,
        name: '',
        hidden: true
    },
    {
        path: '/',
        component: home,
        name: '导航一',
        iconCls: 'el-icon-message', //图标样式class
        children: [{
            path: '/menutab',
            component: menutab,
            name: 'Tab'
        }]
    },
    {
        path: '/',
        component: home,
        name: '导航二',
        iconCls: 'fa fa-id-card-o',
        children: [{
                path: '/menutable',
                component: menutable,
                name: 'Table'
            }
        ]
    }
];
var router = new VueRouter({
    routes
})
export default router;

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import Router from 'vue-router';
import App from './App.vue';
import 'font-awesome/css/font-awesome.min.css'


Vue.use(ElementUI);
Vue.use(Router);

router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        sessionStorage.removeItem('user');
    }
    let user = JSON.parse(sessionStorage.getItem('user'));
    if (!user && to.path != '/login') {
        next({
            path: '/login'
        });
    } else {
        next();
    }
});

// 引入路由
import router from "./router.js"
new Vue({
    el: '#app',
    router, // 注入到根实例中
    render: h => h(App)
});

App.vue

login.vue

home.vue

 

404.vue

menuTab.vue

menuTable.vue

转载于:https://www.cnblogs.com/hzp-tt/p/8707624.html