Vue项目的创建和执行

素颜马尾好姑娘i 2022-02-03 01:47 197阅读 0赞

#### 1.Vue项目准备流程 ####

1.  创建项目文件project
2.  在project文件夹目录下执行 npm init -y 命令,初始化package.json文件,为了以后看起来一目了然.  
    ![在这里插入图片描述][20190508153824803.png]
3.  使用npm i 命令安装项目包需要的包，这里只例举了一部分

npm i mint-ui vue-preview axios vue-router moment vue -S

1.  修改package.json中的script命令脚本

"scripts": { 
        "dev": ".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999",
        "build":"webpack"
      },

1.  在project文件夹目录下创建webpack.config.js配置文件

'use strict'
    const path = require('path');
    const htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = { 
    
        //入口
        entry:{ 
            main:'./src/main.js'
        },
        //出口
        output:{ 
            //所有产出资源的路径
            path:path.join(__dirname,'dist'),
            filename:'build.js'
        },
        moudle:{ 
            loaders:[
                { 
                    test:/\.css$/,
                    loader:'style-loader!css-loader!autoprefixer-loader'
                },
                { 
                    test:/\.less$/,
                    loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
                },
                { 
                    test:/\.(jpg|png|svg|ttf|woff|woff2|gif)$/,
                    loader:'url-loader',
                    options:{ 
                        limit:4096,//4096字节以上生成文件,否则base6
                        name:'[name].[ext]'
                    }
                },
                { 
                    test:/\.js$/,
                    loader:'babel-loader',
                    options:{ 
                        presets:['es2015'],//关键字
                        plugins:['transform-runtime'],//函数
                    }
                },
                { 
                    test:/\.vue$/,
                    loader:'vue-loader'
                }
    
            ]
        },
        plugins:[
            new htmlWebpackPlugin({ 
                template:'./src/index.html'
            })
        ]
    
    }

准备工作到这里基本结束.

--------------------

#### 2.搭建项目结构 ####

在project文件夹目录下新建src、components、static、css、img、vendor目录，以及index.html、app.vue和main.js文件.  
*app.vue文件可以不用放在src目录下,也可以放在components目录下*.  
![在这里插入图片描述][20190508154002211.png]

#### 3.运行并测试 ####

*  编写app.vue文件.

<template>
        <div>
            <mt-button type="primary">测试mintUI</mt-button>
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default { 
            data(){ 
                return{ 
    
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

*  编写index.html文件.

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>信息管理系统</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>

*  在components目录下新建home文件,并在里面新建home.vue文件(为了测试路由).

<template>
        <div>
            这里是首页
        </div>
    </template>
    
    <script>
        export default {
            data(){
                return{
    
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

*  编写main.js文件.

'use strict'
    //引入第三方包 开始
    import Vue from 'vue';
    import Home from './components/home/home.vue';
    
    
    //引入路由
    import VueRouter from 'vue-router';
    //安装插件
    Vue.use(VueRouter);
    
    //Mint:引入mint-ui
    import Mint from 'mint-ui';
    //Mint:引入css
    import 'mint-ui/lib/style.css';
    //Mint:安装插件
    Vue.use(Mint);
    //Axios:引入axios
    import Axios from 'axios';
    //挂载原型
    Vue.prototype.$ajax = Axios;
    //默认配置
    
    //引入第三方包 结束
    
    //引入自己的vue文件 开始
    import App from './app.vue';
    //引入自己的vue文件 结束
    
    
    
    //创建对象并配置路由规则
    let router = new VueRouter({ 
        routes:[
            //配置路由规则
            { path:'/',redirect:{ name:'home'}},//重定向
            { name:'home',path:'/home',component:Home}
        ]
    });
    
    //创建vue实例
    new Vue({ 
        el:'#app',
        router,
        render:c=>c(App)
    })

*  运行项目  
    因为之前在package.json中修改过script命令脚本,所以在运行项目时在项目名文件所在目录下,直接执行npm run dev这条命令即可  
    由于在安装node\_modules的时候没有指定版本号,默认安装的是最新版的,在执行的时候会出现各种报错,经过整理大部分是因为使用最新版的问题.  
    以下是一些报错的解决方法:

1.  [Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file][Module parse failed_ Unexpected token _2_0_ You may need an appropriate loader to handle this file]
2.  [webpack.config.js配置遇到Error: Cannot find module ‘@babel/core’&&Cannot find module ‘@babel/plugin-transform-react-jsx’ 问题][webpack.config.js_Error_ Cannot find module _babel_core_Cannot find module _babel_plugin-transform-react-jsx_]
3.  [unknown property ‘loaders’.][unknown property _loaders_.]
4.  [webpack版本问题导致webpack.config.js配置错误][webpack_webpack.config.js]

#### End ####

经过好长时间的折腾,终于弄出来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bHUzMg_size_16_color_FFFFFF_t_70]

*新手一枚,不喜勿喷*

[20190508153824803.png]: /images/20220203/168a3e2724b44d93a5886aac3ba214b8.png
[20190508154002211.png]: /images/20220203/819349639f2f4822a06d91d5aa844cb0.png
[Module parse failed_ Unexpected token _2_0_ You may need an appropriate loader to handle this file]: https://blog.csdn.net/u011584949/article/details/80449557
[webpack.config.js_Error_ Cannot find module _babel_core_Cannot find module _babel_plugin-transform-react-jsx_]: https://www.cnblogs.com/soyxiaobi/p/9554565.html
[unknown property _loaders_.]: https://segmentfault.com/q/1010000013456976
[webpack_webpack.config.js]: https://cloud.tencent.com/developer/section/1477567
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bHUzMg_size_16_color_FFFFFF_t_70]: /images/20220203/c4bfb9c901c244e181fcc947d51d9007.png