Vue 入门之目录结构介绍

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

安装过程

• 1.从nodejs官网(http://nodejs.cn/download/)下载安装

• 解压到相应的文件夹

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 -v和npm -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.vueassets 资源目录，这里的资源会被wabpack构建images logo.pngroutes 前端路由 index.js store 应用级数据（state）index.jsviews 页面目录hello.vuenotfound.vuestatic 纯静态资源，不会被wabpack构建。test 测试文件目录（unit&e2e）unit 单元测试 index.js 入口脚本karma.conf.js karma配置文件specs 单测case目录 Hello.spec.js