美文网首页程序员
从0创建Vue项目

从0创建Vue项目

作者: delicacylee | 来源:发表于2020-12-03 14:14 被阅读0次

先保证安装了Node.js，下载地址https://nodejs.org/zh-cn/

一般都是按照官网，通过Vue-Cli来创建项目，但是为了一点一点地学习Vue，因此自己从0开始创建，以下是初始化项目目录

dist      // 发布目录
public    // 公共资源目录
src      // Vue项目的源代码目录
|--- api    // 接口目录
|--- components    // VUE组件目录
|--- router   // VUE路由目录
|--- views    // 视图目录
|--- App.vue    // 主程序文件
|--- main.js      // 主脚本文件
babel.config.js      // babel配置文件
package.json       // 依赖包文件

1、创建package.json

{
  "name": "hiver",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "description": "",
  "author": {
    "name": ""
  },
  "dependencies": {
    "axios": "0.18.1",
    "babel-eslint": "^10.1.0",
    "echarts": "4.2.1",
    "element-ui": "2.13.2",
    "js-beautify": "1.10.2",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "screenfull": "4.2.0",
    "vue": "2.6.10",
    "vue-router": "3.0.2",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "node-sass": "4.14.1",
    "sass-loader": "8.0.2",
    "vue-template-compiler": "2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2、创建babel.config.js文件

module.exports = {
  presets: [
    '@vue/app'
  ]
};

3、安装相关依赖
进入到根目录下，在命令行中输入

npm install --registry=https://registry.npm.taobao.org

其中包含几个常用指令
npm run build指令用于编译源代码
npm run serve指令用于即时预览

4、创建Vue.app

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>

5、创建main.js

import Vue from 'vue';

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css'
import Element from 'element-ui'

import App from './App'
import router from './router'

Vue.use(Element, {
    size: Cookies.get('size') || 'medium'
})

Vue.config.productionTip = false

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

6、创建路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRoutes = [
    {
        path: '',
        component: (resolve) => require(['@/views/index'], resolve),
        hidden: true
    },
    {
        path: '/detail/:detailId(\\d+)',
        component: (resolve) => require(['@/views/detail'], resolve),
    }
]

export default new Router({
    mode: 'history', 
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
})

7、创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>保全IOT管理系统</title>
    <style>
        html,
        body,
        #app {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .chromeframe {
            margin: 0.2em 0;
            background: #ccc;
            color: #000;
            padding: 0.2em 0;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            z-index: 1001;
        }

            #loader:before {
                content: "";
                position: absolute;
                top: 5px;
                left: 5px;
                right: 5px;
                bottom: 5px;
                border-radius: 50%;
                border: 3px solid transparent;
                border-top-color: #FFF;
                -webkit-animation: spin 3s linear infinite;
                -moz-animation: spin 3s linear infinite;
                -o-animation: spin 3s linear infinite;
                -ms-animation: spin 3s linear infinite;
                animation: spin 3s linear infinite;
            }

            #loader:after {
                content: "";
                position: absolute;
                top: 15px;
                left: 15px;
                right: 15px;
                bottom: 15px;
                border-radius: 50%;
                border: 3px solid transparent;
                border-top-color: #FFF;
                -moz-animation: spin 1.5s linear infinite;
                -o-animation: spin 1.5s linear infinite;
                -ms-animation: spin 1.5s linear infinite;
                -webkit-animation: spin 1.5s linear infinite;
                animation: spin 1.5s linear infinite;
            }


        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }


        #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #7171C6;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

            #loader-wrapper .loader-section.section-left {
                left: 0;
            }

            #loader-wrapper .loader-section.section-right {
                right: 0;
            }


        .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
        }

        .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

        .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }

        .no-js #loader-wrapper {
            display: none;
        }

        .no-js h1 {
            color: #222222;
        }

        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            position: absolute;
            top: 60%;
            opacity: 1;
            line-height: 30px;
        }

            #loader-wrapper .load_title span {
                font-weight: normal;
                font-style: italic;
                font-size: 13px;
                color: #FFF;
                opacity: 0.5;
            }
    </style>
</head>
<body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
    </div>
</body>
</html>

8、创建Index.vue

<template>
    <div class="dashboard-container">
        <a href="#/detail/1234">Hello, World.</a>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
    .dashboard-container {
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;
    }

    @media(max-width:1024px) {

    }
</style>

9、创建detail.vue

<template>
    <div>
        <a href="">返回</a>
    </div>
</template>

<script>
    export default {
        name: 'Detail',
        data() {
            return {

            }
        },
        created() {
            const id = this.$route.params && this.$route.params.detailId;
            alert(id);
        }
    };
</script>

<style scoped>
</style>

这样一来一个简单的vue项目就创建成功了，剩下的就需要去https://cn.vuejs.org/index.html一点一点学习了。

相关文章

网友评论

    本文标题：从0创建Vue项目

    本文链接：https://www.haomeiwen.com/subject/idymwktx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    程序员

    关于我们|服务条款|联系我们|从0创建Vue项目|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！