资讯专栏INFORMATION COLUMN

Vue项目构建

LittleLiByte / 853人阅读

摘要:什么是读音,类似于是一套用于构建用户界面的渐进式框架。的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

什么是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 文件:

然后在这个 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   构建目标 (app | lib | wc | wc-async, 默认值:app)
  -n, --name       库的名字或 Web Components 组件的名字 (默认值:入口文件名)
  -d, --dest        输出目录 (默认值: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", { /* ... */ })

更多规范 :
vue代码规范

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109585.html

相关文章

  • 《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

    摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...

    qieangel2013 评论0 收藏0
  • 《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

    摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...

    kel 评论0 收藏0
  • vue-cli 构建 vue 项目详解

    摘要:打开浏览器输入,会看到构建的项目的主页目录结构使用编辑器打开推荐使用,下面具体看看目录结构在中,根据我们在构建项目的时候的选项,有以下几个命令。 构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度。这...

    JeOam 评论0 收藏0
  • Vue.js 2.0 轻松入门(一)

    摘要:的官方下载地址点我进入的官方下载地址下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开,系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面...

    617035918 评论0 收藏0
  • Vue.js 2.0 轻松入门(一)

    摘要:的官方下载地址点我进入的官方下载地址下载电脑系统对应文件,然后进行安装,安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开,系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架 介绍 Vue.js 是什么 vue.js 是一套构建用户界面...

    mmy123456 评论0 收藏0

发表评论

0条评论

LittleLiByte

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<