基于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

Vue 基于node npm & vue-cli & element UI创建vue单页应用的更多相关文章

  1. 从头创建一个新的vue项目------用npm|yarn下载vue-cli|vue-ui创建vue

    1.下载node或者是nvm node可以直接去node官网下载,http://nodejs.cn/,默认是长期维护的版本 如果想管理node的版本,可以下载nvm.这个是可选的.但是作为一个前端工程 ...

  2. NPM安装vue-cli，并创建vue+webpack项目模板

    1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install  估计会非常慢,我们可以使用淘宝NPM镜像下载安装:htt ...

  3. 🎉 Element UI for Vue 3.0 来了！

    第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~ 2016 年 3 月 13 日 Element 悄然诞生,经历 ...

  4. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  5. php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...

  6. mac下搭建基于vue-cli 3.0的Element UI 项目

    1.安装yarn管理工具(包含node.js); 2.安装全局vue-cli全家桶: yarn global add @vue/cli 3.创建.测试一个vue-cli项目: vue create a ...

  7. vue ui 创建vue项目 没反应的解决办法 2021

    1.升级vue 脚手架 即可   2.再  vue ui  创建项目 cnpm i -g @vue/cli

  8. 使用的vue、elementUI、vuex、express、mongoDB的单页应用

    基于vue.vuex.express.mongodb的一个单页应用,包括前后端,前端主要是使用vue,后端是node的express,数据库是使用的mongodb 1.下载使用 git clone h ...

  9. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

随机推荐

  1. Flink架构和调度

    1.Flink架构 Flink系统的架构与Spark类似,是一个基于Master-Slave风格的架构,如下图所示: Flink集群启动时,会启动一个JobManager进程.至少一个TaskMana ...

  2. 远程桌面 使用 本地输入法（虚拟化 终端 远程接入 RemoteApp）

    远程桌面连接组件是微软从Windows 2000 Server开始提供的,该组件一经推出便受到了很多用户的拥护和使用.   在WINDOWS XP和WINDOWS SERVER 2003中微软公司将该 ...

  3. 20191127 Spring Boot官方文档学习（4.12）

    4.12.缓存(Caching) Spring框架提供了对应用程序透明添加缓存的支持.从本质上讲,抽象将缓存应用于方法,从而根据缓存中可用的信息减少执行次数.缓存逻辑是透明应用的,不会对调用者造成任何 ...

  4. JPA-style positional param was not an integral ordinal 异常

    JPA-style positional param was not an integral ordinal 多是sql之间的空格问题,或者sql拼接问题. 字符串与字符串直接相加要加空格

  5. windows下安装mysql8并修改密码

    MySQL下载地址:http://dev.mysql.com/downloads/mysql/ Windows下安装MySQL 我下的是最新版的MySQL,解压后,目录如下: 1.进入dos的命令行, ...

  6. 网站私有CA证书制作

              所谓的网站安全证书 是通过在客户端浏览器和Web服务器之间建立一条SSL安全通道保证了双方传递信息的安全性,而且用户可以通过服务器证书验证他所访问的网站是否真实可靠. 大体步骤: ...

  7. echart 柱状图 两个纵轴坐标 刻度不一样

    在使用echart的过程中, 有的时候柱状图会使用两个纵坐标, 如果两个纵坐标的最大值是一样的还好,这样刻度也会一样. 但是多数情况下最大值是不一样的, 这样就造成了,刻度线很乱,显示不均匀. 解决办 ...

  8. Nginx 2.安装与部署配置

    转 https://www.cnblogs.com/wcwnina/p/8728430.html > 下载 官方网站:https://nginx.org/en/download.html Win ...

  9. You-Get，多网站视频下载工具，非常方便

    You-Get是一个非常优秀的网站视频下载工具.使用You-Get可以很轻松的下载到网络上的视频.图片及音乐. 按Win+R键打开运行,输入cmd,再输入命令 pip install you-get, ...

  10. W10: Warning: Changing a readonly file 解决办法

    在linux上编辑文件的时候,明明是使用的root登录的,可是这种至高无上的权限在按下i的时候被那串红色错误亵渎了W10: Warning: Changing a readonly file. 困扰两 ...