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

 

目录
相关文章
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
3月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
224 77
|
2月前
|
JavaScript
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
103 13
node环境之Error: Cannot find module ‘chalk’ 报错无法解决的问题—-网上说让你npm install chalk 基本是没有用的-优雅草央千澈解决方案
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
1月前
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
35 3
node环境之当我们遇到需要付费的依赖库@fortawesome/fontawesome-pro导致npm install无法进行怎么办-fontawesome-pro依赖库
|
3月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
171 62
|
1月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
105 5
|
3月前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
91 31
|
3月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
3月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
76 3

热门文章

最新文章

推荐镜像

更多