美文网首页
season0. vue项目初始化及发布

season0. vue项目初始化及发布

作者: To_QT | 来源:发表于2019-05-20 09:50 被阅读0次

    环境搭建

    依赖管理

    大型项目构建

    1. 下载node.js对其进行版本管理
    2. npm 常规命令:
    • npm安装检测:
    npm -v
    
    • 使用淘宝镜像的命令:
    cnpm install npm -g
    
    • 安装/卸载模块:
    # 安装模块
    npm install <Module Name>
    # 卸载模块
    npm uninstall <Module Name>
    # 更新模块
    npm update <Module Name>
    # 搜索模块
    npm search <Module Name>
    

    安装好之后,包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require('<Module Name>') 的方式就好,无需指定第三方包路径。

    var express = require('express');
    
    • 全局安装
    npm install express -g   # 全局安装
    
    1. 创建项目
    # 升级或安装 cnpm
    npm install cnpm -g
    
    # 最新稳定版
    cnpm install vue
    # 安装live-server
    npm install live-server -g
    # 全局安装 vue-cli
    cnpm install --global vue-cli
    
    
    小型项目构建

    页面中直接引用:

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    

    运行方法

    • live-server使用
      用npm进行全局安装
    cd my-project
    cnpm install
    live-server
    

    vue 项目的创建

    # 创建一个基于 webpack 模板的新项目,这里需要进行一些配置,默认回车即可
    vue init webpack my-project
    

    vue-cli 项目的发布

    npm run build
    

    输入命令后,vue-cli会自动进行项目发布打包。

    • 在执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件,其中的目录包括:
      • index.html主页文件:因为我们开发的是单页web应用,所以说一般只有一个html文件。
      • static 静态资源文件夹:里边js、CSS和一些图片。

    vue-cli 项目目录

    • /src/main.js 是整个项目的入口文件,该文件中引入了App.vue文件。
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    • App.vue文件

      • <template></template>标签包裹的内容<router-view>标签说明使用了路由机制
    • router/index.js 路由文件

    import Vue from 'vue'
    import Router from 'vue-router'
    import Hello from '@/components/Hello'
     
    Vue.use(Router)
     
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: Hello
        }
      ]
    })
    

    相关文章

      网友评论

          本文标题:season0. vue项目初始化及发布

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