Vue项目构建

0

什么是vue.js

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

怎么构建一个vue应用程序

npm(模块管理器)

  • node默认的模块管理器,是一个命令行下的软件,用来管理和安装Node模块(path,fs,http等)
  • npm 不需要独立安装,在安装Node的时候,会连带一起安装npm,但是,Node附带的npm可能不是最新的版本,最好用以下命令,更新到最新版本
npm install npm@latest -g

上面的命令中,@latest表示最新版本,-g 表示全局安装。所以命令的主干是 npm install npm ,也就是使用npm 安装自己,因为npm本身与Node的其它模块没有区别,然后可以运行下面命令查看查看各种信息

npm help   // 查看npm 命令列表

npm -l   // 查看各个命令的简单用法

npm -v   // 查看npm的版本

npm init  //  用来初始化生成一个新的package.json文件,它会向用户提一系列问题,
          //如果你觉得不需要修改默认配置,一路回车就可以了

vue-cli3.x(vue.js的脚手架工具)

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性

  • 安装Vue-cli
npm install -g @vue/cli     // 安装

vue -v    // 查看vue 版本
  • 快速原型开发

我们可以使用 vue serve 和 vue build 命令 对单个*.vue 文件进行快速原型开发
vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

你所需要的仅仅是一个 App.vue 文件:

<template>
  <h1>Hello!</h1>
</template>

然后在这个 App.vue 文件所在的目录下运行:

vue serve

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件:

vue serve MyComponent.vue

如果需要,你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。
vue build

Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值:app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值:入口文件名)
  -d, --dest <dir>       输出目录 (默认值:dist)
  -h, --help             输出用法信息

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署:

vue build MyComponent.vue

创建vue项目

  • 通过图形界面创建:
vue  ui

在浏览器会打开一个创建项目的图形化界面,在这里可以过界面操作创建一个新的或导入一个项目,界面如下:

图片描述

  • 通过指令创建
vue create vue-test    // (vue-test就是项目名)

在终端输入命令后,终端会出现一些选择项,我们可以选着项目需要的特性,如Babel编译,Vue路由,Vue状态管理(Vuex),CSS预处理器,代码检测和格式化,以及单元测试等
图片描述

选择需要的特性:
图片描述

配置完成后等待Vue-cli完成初始化,vue-cli初始化完成后,根据提示,进入到vue-test项目中,并启动项目

cd vue-test   // 进入项目

npm run serve   // 运行项目

项目结构

图片描述

编译器 : 推荐使用vscode,因为他有很多强大的插件,如:

  • Vetur : 格式化代码、高亮、代码格式检测、自带Emment、括号自动补全
  • Vue 2 Snippets: 简短缩写
  • Auto Close Tag
  • Path Intellisense 自动路劲补全
  • JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

代码规范:

1.组件按需引入
2.使用 PascalCase(首字母大写命名)风格 命名组件。

Vue.component('MyComponentName', { /* ... */ })

<my-component-name></my-component-name>

更多规范 :
vue代码规范

你可能感兴趣的

载入中...