Vue 入门之目录结构介绍

时间：2022-09-14 12:54:59

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 -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.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

 

 

 

 

标签：

相关文章