Vue项目构建

什么是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文件,它会向用户提一系列问题，
          //若是你以为不须要修改默认配置，一路回车就能够了

• 咱们能够发布个本身的npm包，给别人使用，npm社区
• npm中文文档 npm中文文档
• Node官网 Node官网
• 安装Node，node安装包下载下来，直接安装就行 下载Node

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代码规范