Vue 基于node npm & vue-cli & element UI创建vue单页应用

简介: Vue 基于node npm & vue-cli & element UI创建vue单页应用

基于node npm & vue-cli & element UI创建vue单页应用

开发环境

 

Win 10

 

node-v10.15.3-x64.msi

下载地址:

https://nodejs.org/en/

 

安装node

安装vue-cli

1、安装node-v10.15.3-x64.msi

 

2、设置注册地址

因为npm官方仓库在国外,有时候下载速度会非常慢,不过有淘宝镜像可以使用,下载包的速度很快。而且淘宝镜像是定时更新同步npm的官方仓库的。

 

npm config set registry https://registry.npm.taobao.org

 

这样,npm在执行安装包的命令时,会先从淘宝镜像去下载包。

如果不设置,安装包过程中可能出现如下错误

 

 

 

npm ERR! code Z_BUF_ERROR

npm ERR! errno -5

npm ERR! zlib: unexpected end of file

 

npm ERR! A complete log of this run can be found in:

 

3、安装全局脚手架工具vue-cli

npm install vue-cli -g

 

创建vue项目

1、进入到存放项目根目录,执行vue-init webpack <package>命令

cd /d E:\MyProjects\TMP

E:\MyProjects\TMP>vue-init webpack frontend

? Project name (frontend)待输入项目名,可直接按Enter键,或者输入其它(括号中都部分为默认值,下同)

? Project description (A Vue.js project) 待输入项目名,可直接按Enter键,或者输入其它

? Author待输入作者名称

? Vue build (Use arrow keys)

> Runtime + Compiler: recommended for most users运行时编译,可按上下方向键切换选项,选好后按Enter键,到此处可直接按Enter键

 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 只运行时

? Install vue-router? (Y/n) 是否安装vue-router输入Y,按Enter键

? Use ESLint to lint your code? (Y/n) 是否在代码中使用ESLint输入n,按Enter键

? Set up unit tests (Y/n) 输入n,按回车键,即不设置单元测试

? Setup e2e tests with Nightwatch? (Y/n) 是否使用E2E 黑盒测试,输入n,按回车键,

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

> Yes, use NPM 项目创建后是否运行npm install按上下方向键选择,此处可选择该项,直接回车,如果选择No, I will handle that myself,则执行npm run dev之前,需要执行npm install

 Yes, use Yarn

 No, I will handle that myself

... 略

cd frontend

 npm run dev

... 略

 

注意:

1、 执行vue-init命令后,会出现交互式等待,等待输入、选择(通过按方向键),具体输入、选择如上

 

2、验证

E:\MyProjects\TMP>cd frontend

E:\MyProjects\TMP\frontend>npm run dev

……略

15:16:15 I  Your application is running here: http://localhost:8080

 

浏览器访问:

 

 

 

 

至此,项目文件结构如下

 

 

 

运行编译vue项目

1、修改frontend/index.html,如下,添加一下带背景色内容<p>hello my vue</p>

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>frontend</title>

</head>

<body>

<div id="app"></div>

<!-- built files will be auto injected -->

<p>hello my vue</p>

</body>

</html>

 

2、在vue项目根目录(例中为frontend目录)下,cmd命令行运行npm run build,运行完成后,会在当前目录下生成dist目录,里面包含一个 index.html 和一个文件夹static。

 

 

 

参考链接:

https://v1-cn.vuejs.org/guide/installation.html

 

安装element-ui

E:\MyProjects\TMP>cd frontend

E:\MyProjects\TMP\frontend>npm i element-ui

注意,如上,先要进入vue项目所在目录(例中为frontend目录),然后执行 npm i element-ui命令,不然后面运行会出现以下错误:

 

 

 

 

如果需要按需引用element-ui,继续执行以下命令

npm install babel-plugin-component –D

 

修改main.js

 

修改main.js文件

两种导入方式

1、 导入整个element-ui

 

 

 

 

2、按需引用(假设插件已经安装)

 

 

 

修改App.vue

如下,修改、添加带背景色内容

<template>

<div id="app">

<img src="./assets/logo.png">

<router-view/>

<el-input v-model="input" placeholder="请输入内容">输入框</el-input>

</div>

 

</template>

 

<script>

export default {

   name: 'App',

   data() {

       return {

         input: ''

       }

     }

}

</script>

 

<style>

#app {

 font-family: 'Avenir', Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

</style>

浏览验证

 

 

 

参考链接:

https://cloud.tencent.com/developer/section/1489858

https://cloud.tencent.com/developer/section/1489859

 

目录
相关文章
|
3月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
159 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
3月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
236 2
|
2月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
206 77
|
2月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
152 62
|
3月前
|
JavaScript 安全 测试技术
vue封装组件发布到Npm
【10月更文挑战第17天】
|
2月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
83 31
|
2月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
2月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
59 3
|
2月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
234 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置

推荐镜像

更多