VUE+Element环境搭建与安装的方法步骤

1,安装node,确保安装4.0版本以上,具体的安装可以百度。

2,在命令行创建文件夹

3,安装Vue-cli

输入:cnpm install -g vue-cli , 回车, 等待安装。。。。

输入:vue ,查看vue相关信息

4,初始化项目

vue init webpack last_demo 然后等一下就会出现相关的信息,再自己去选择安装的一些设置

安装完的时候,你的文件夹就变成了这样了:

如果你的文件夹中没有node_modules的文件,那么你就要在命令行中打开你的项目并输入:

npm install

5,运行VUE环境,输入npm run dev ,然后使用浏览器打开:http://localhost:8080

一、搭建环境

由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍。

安装好后可以打开命令行用 npm-v node-v 查看是否安装成功以及版本号

如果以前已经安装过node 和 npm 最好升级到最新版本,命令行 npm install npm@x.xx.x

首先全局安装vue-cli,打开CMD命令行,npm install -g vue-cli

接下来新建项目,运行 vue init webpack demo 这里的demo是你项目的名字,接下来会有一些初始化的设置,其中vue-router是路由,反正我都会选择安装,其他的可以回车跳过或者选择no

—按照提示,cd到新建的项目下,运行npm install

—运行npm run dev

到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了

另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 “/”改成”./”

二、安装Element

到这里我们就可以愉快的玩耍Vue了,但是我们之前说的是 Vue + Element 所以接下来我们要继续安装ElementUI

cd到当前项目 运行 npm i element-ui -S

到这里我们已经安装好了element,接下来就是在项目里面引用了,打开src目录下的main.js

三、打包

在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue的安装及element组件的安装方法

    一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好

  • VUE+Element环境搭建与安装的方法步骤

    1,安装node,确保安装4.0版本以上,具体的安装可以百度. 2,在命令行创建文件夹 3,安装Vue-cli 输入:cnpm install -g vue-cli , 回车, 等待安装.... 输入:vue ,查看vue相关信息 4,初始化项目 vue init webpack last_demo 然后等一下就会出现相关的信息,再自己去选择安装的一些设置 安装完的时候,你的文件夹就变成了这样了: 如果你的文件夹中没有node_modules的文件,那么你就要在命令行中打开你的项目并输入: np

  • vue开发环境配置跨域的方法步骤

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置 目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • Java新手环境搭建 Tomcat安装配置教程

    安装 Tomcat 之前请一定先安装 Java ,然后才能安装 Tomcat . 安装 Java .环境变量 path 的设置以及 cmd 小技巧请看:Java新手环境搭建 JDK8安装配置教程 下载 Tomcat 首先到 Tomcat 的官方网站下载 Windows 版本的 Tomcat 最新版,根据我们所使用的操作系统,我们下载 64 位 Windows 的 zip 版本.不建议使用 Installer 版本. 我们以 apache-tomcat-9.0.0.M15-windows-x64.

  • Flink开发IDEA环境搭建与测试的方法

    一.IDEA开发环境 1.pom文件设置 <properties> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <encoding>UTF-8</encoding> <scala.version>2.11.12</scala.version>

  • vue项目环境搭建 启动 移植操作示例及目录结构分析

    目录 项目搭建 项目创建 项目启动停止 项目目录结构分析 全局脚本配置 index.html详细介绍 main.js入口文件详细 App.vue跟组件介绍 router-index.js 路由介绍 项目搭建 下载node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm,用淘宝源: npm install -g cnpm --registry=https://registry.npm.taobao.org 检测是否安装成功:cnpm -version

  • vue项目环境搭建

    一.node.js下载和安装 官网下载安装nodejs,会自动捆绑安装npm,具体步骤省略. 二.express 安装 npm install express -g npm install -g express-generator -----g在前不会安装到全局(坑) npm install express-generator -g 全局安装 三.安装教脚手架 3.1 安装或更新全局vue npm install vue -g 3.2 安装或更新全局路由: npm install vue-rou

  • Linux环境下使用Docker搭建Jenkins容器的方法步骤

    目录 需要提前准备的条件 Step1:安装Jenkins镜像 Step2:docker启动Jenkins容器 Step3:访问Jenkins Step4:安装Jenkins插件 需要提前准备的条件 Maven环境 Docker环境 JDK环境(Centos8 自带JDK环境去除,重装的JDK) Step1:安装Jenkins镜像 用docker查询jenkins镜像 docker search jenkins 我们选择下载第二个,jenkins/jenkins,下载命令 docker pull

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • Python中使用Selenium环境安装的方法步骤

    环境准备 已正确安装python环境,已安装chrome浏览器或者firefox浏览器 使用 python --version 命令如果输出python版本则python 安装成功 安装selenium 使用pip命令安装selenium pip install selenium 下载chrome驱动 或者firefox驱动 selenium的chrome驱动(国内阿里像) selenium的firefox驱动(github地址) 注意:下载对应版本的驱, 点击浏览器三个点 - 帮助 - 关于G

随机推荐