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

Vue 入门之目录结构介绍的更多相关文章

  1. vue学习笔记(三)——目录结构介绍

    1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载 ...

  2. vue 目录结构介绍

    1 初始目录如下: 2 目录结构介绍 bulid:最终帆布的代码存放位置 config:配置目录,包括端口号等 node_modules:npm加载的项目依赖模块 src:z这里是我们要开发的目录,基 ...

  3. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  4. create-react-app脚手架的安装和目录结构介绍

    1.对脚手架的初步了解 编程领域中的“脚手架”指的是能够快速搭建项目“骨架”的一类工具,例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compon ...

  5. (3.1)mysql基础深入——mysql二进制与源码目录结构介绍

    (3.1)mysql基础深入——mysql二进制与源码目录结构介绍 关键字:二进制目录结构,源码目录结构(编译安装目录结构) 1.二进制安装程序目录结构 [1] BIN -- mysql的可执行文件( ...

  6. Flutter 目录结构介绍、入口、自定义 Widget、MaterialApp 组件、Scaffold 组件

    Flutter 目录结构介绍 文件夹 作用 android android 平台相关代码 ios ios 平台相关代码 lib flutter 相关代码,我们主要编写的代 码就在这个文件夹 test ...

  7. 怎样理解 Vue 项目的目录结构?

      Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用: 01. build - 存储项目构建相关的代码, 比如 webpack. 02. config - Vue 的配置目录,包括端口 ...

  8. hadoop的目录结构介绍

    hadoop的目录结构介绍 解压缩hadoop 利用tar –zxvf把hadoop的jar包放到指定的目录下. tar -zxvf /home/software/aa.tar.gz -C /home ...

  9. Django 创建 APP和目录结构介绍

    一.通过pip安装Django 以windows 系统中使用pip命令安装为例 win+r,调出cmd,运行命令:pip install django自动安装PyPi 提供的最新版本.指定版本,可使用 ...

随机推荐

  1. [翻译 EF Core in Action 2.0] 查询数据库

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  2. 微服务(入门二):netcore通过consul注册服务

    基础准备 1.创建asp.net core Web 应用程序选择Api 2.appsettings.json 配置consul服务器地址,以及本机ip和端口号信息 { "Logging&qu ...

  3. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. Luogu P5285 [十二省联考2019]骗分过样例

    Preface ZJOI一轮被麻将劝退的老年选手看到这题就两眼放光,省选也有乱搞题? 然后狂肝了3~4天终于打完了,期间还补了一堆姿势 由于我压缩技术比较菜,所以用的都是非打表算法,所以一共写了5K- ...

  5. 后端MVC和前端MVVC关系详解

    MVC 是后端的分层开发概念: MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel

  6. Android USB Headset: Device Specification

    For USB headsets to work seamlessly across the Android ecosystem, Android devices must support them ...

  7. .NET Core微服务之基于IdentityServer建立授权与验证服务(续)

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功 ...

  8. NormalDialogFragmentDemo【普通页面的DialogFragment】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 该Demo主要演示DialogFragment作为普通页面,显示全屏和状态栏下方的效果以及动画效果. 效果图 代码分析 @Overr ...

  9. RecyclerFlexboxLayoutManagerDemo【使用FlexboxLayoutManager实现流式布局】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FlexboxLayout是一个Google 开源的库项目,它将CSS Flexible Box Layout Module的类似功 ...

  10. Docker进阶之五:容器管理

    容器管理 一.创建容器常用选项 docker container --help 指令 描述 资源限制指令 -i, --interactive 交互式 -m,--memory 容器可以使用的最大内存量 ...