zoukankan      html  css  js  c++  java
  • 使用vue-cli搭建VUE项目

    使用vue-cli搭建VUE项目

    1. 安装并初始化项目

    Vue.js提供了一个官方命令行工具,可用于快速搭建大型的应用。

    # 全局安装 vue-cli(前提是安装了淘宝的npm镜像,就可以使用cnpm命令了)
    cnpm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    vue init webpack my-project
    # 这里需要进行一些配置,默认回车即可
    ...
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd my-project
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack
    

    2. 运行并访问项目

    # 进入项目
    cd my-project
    # 安装相关依赖包
    cnpm install
    # 启动运行
    cnpm run dev
    # 运行成功之后显示:
     DONE  Compiled successfully in 3323ms                                                                          14:17:24
    
     I  Your application is running here: http://localhost:8080
    

    项目启动成功,通过浏览器访问http://localhost:8080就可以看到项目的主页了。

    3. 项目目录结构

    刚初始化完成的项目目录以及作用:

    目录/文件 说明
    build 项目构建(webpack)相关代码
    config 配置目录,包括端口号等。我们初学可以使用默认的。
    node_modules npm 加载的项目依赖模块
    src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。
    static 静态资源目录,如图片、字体等。
    test 初始测试目录,可删除
    .xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
    index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
    package.json 项目配置文件。
    README.md 项目的说明文档。

    4. 项目构建后打包到服务器

    更改config/index.js文件,将两处assetsPublicPath的值从/改为./,然后运行:

    cnpm run build
    

    运行成功后目标文件会生成到dist目录,然后放到目标服务器,以tomcat服务器为例,将dist整个目录放到webapps下面,启动tomcat然后访问http://localhost:8080/dist就OK了!

    疑问1

    按照官方教程可以很简单的搭建运行项目,但是VUE的运行原理是什么呢?资源文件如何加载的,如何编译的,主要加载了哪些文件,这些文件的对应关系又是什么?

    作为一个后端小哥,对VUE真的不熟悉,在网上发现一个提问正好解决了我的疑问,https://segmentfault.com/q/1010000010792560,简单的说就是得先学习webpack(打包工具)才能解决这些疑问奥。

  • 相关阅读:
    iOS软件版本更新思路
    Xcode里-ObjC, -all_load, -force_load
    NSFileManager
    [Android问答] px、dp和sp,这些单位有什么区别?
    annot refer to a non-final variable * inside an inner class defined in a different method"错误解析
    android Handler post sendMessage
    谈layout_gravity和gravity的用法
    Android LayoutInflater详解
    Android中pendingIntent的深入理解
    Intent和PendingIntent的区别
  • 原文地址:https://www.cnblogs.com/scuwangjun/p/9435500.html
Copyright © 2011-2022 走看看