zoukankan      html  css  js  c++  java
  • Vue 入门之目录结构介绍

    Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    安装过程

    • 解压到相应的文件夹
    tar -xvf node-v8.1.2-linux-x64.tar.xz -C ../env/

    • 建立软链接
    • sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/node /usr/local/bin/node
      sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/npm /usr/local/bin/npm

    • 验证 
      使用node -vnpm -v来验证是否安装成功,若安装成功则会看到相应的版本信息。
    • 2.安装cnpm

    • 安装cnpm是因为使用npm install安装包时速度很慢,所以建议安装cnpm后使用cnpm install来安装包。

      npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 安装完成后同样要建软链接,否则在使用cnpm时会报No command 'cnpm' found的错误。

      sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/cnpm /usr/local/bin/cnpm
    • 3.安装vue-cli

      cnpm install -g vue-cli
    • 安装完成后同样要建软链接
    • sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/vue /usr/local/bin/vue

    初始化项目

    命令创建一个Vue项目

    vue init webpack 项目名字

    然后打开终端,执行“npm install”命令安装依赖库。

    如果开发中需要安装一些额外的第三方库,可以使用如下面的命令:

    npm install 库名称 –save

    然后使用下面的命令启动或者发布项目

    npm run dev //启动项目

    npm run build //发布项目

    Vue目录结构介绍

    打开新建的Vue项目,其目录结构如下所示。

     index.html 入口页面
     build 构建脚本目录
     build-server.js 运行本地构建服务器,可以访问构建后的页面
     build.js 生产环境构建脚本
     dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
    dev-server.js 运行本地开发服务器
    utils.js 构建相关工具方法
    webpack.base.conf.js wabpack基础配置
    webpack.dev.conf.js wabpack开发环境配置
    webpack.prod.conf.js wabpack生产环境配置
     config 项目配置
     dev.env.js 开发环境变量
     index.js 项目配置文件
    prod.env.js 生产环境变量
    test.env.js 测试环境变量
    mock mock数据目录
     hello.js
     package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
    src 项目源码目录
     main.js 入口js文件
    app.vue 根组件
     components 公共组件目录
     title.vue
    assets 资源目录,这里的资源会被wabpack构建
    images
     logo.png
    routes 前端路由
     index.js
     store 应用级数据(state)
    index.js
    views 页面目录
    hello.vue
    notfound.vue
    static 纯静态资源,不会被wabpack构建。
    test 测试文件目录(unit&e2e)
    unit 单元测试
     index.js 入口脚本
    karma.conf.js karma配置文件
    specs 单测case目录
     Hello.spec.js

     

  • 相关阅读:
    【转】当你输入一个网址的时候,实际会发生什么?
    opencv 操作本地摄像头实现录像
    谷歌笔试题——排序,只允许0和其他元素交换
    判断素数的相关代码
    VS2010 代码自动对齐 快捷键
    谷歌的一道面试题
    各种排序算法代码汇总
    冒泡排序
    lua环境变量
    lua迭代
  • 原文地址:https://www.cnblogs.com/XT666-666/p/10566119.html
Copyright © 2011-2022 走看看