Vue项目构建

2019年9月16日 252次阅读 来源: smallgang

什么是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项目构建》

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

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

选择需要的特性:
《Vue项目构建》

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

cd vue-test   // 进入项目

npm run serve   // 运行项目

项目结构

《Vue项目构建》

编译器 : 推荐使用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代码规范

    原文作者：smallgang
    原文地址: https://segmentfault.com/a/1190000019209806
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞