Vue项目构建

2019年9月1日 179次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞