首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

vue-cli 初始----安装运行Vue项目

文章目录 安装 Node.js 环境 1、官网下载 2、配置环境变量 3、Node.js 配置 安装 Vue Cli 0、安装配置好node.js环境 1、安装 vue cli 2、通过 vue cli...创建项目 3、创建 一个vue项目 4、项目创建成功 5、运行前端项目 安装 Node.js 环境 1、官网下载 去node.js官网下载版本到本地,我下载到 E:\node.js\,下载完之后会有这么多文件...Vue Cli 0、安装配置好node.js环境 查看上文教程,完成安装配置 1、安装 vue cli cmd执行命令,安装 vue2 版本 npm install -g vue-cli 等一会下载,...下载完成 同时在我们自己设置的本地仓库多了一堆vue-cli文件 2、通过 vue cli 创建项目 (1)配置 node.js 本地仓库环境变量 在环境变量中加入本地仓库的路径方便执行命令 (2...是否安装 vue路由,选择y 使用eslint在code中,就是个语法校验器,可以不用 是否设置单元测试,选择no 是否设置e2e 测试,选择n 是否要使用 npm install 命令,选择第一个

88310

Vue CLI

Vue CLI 1、简介 2、安装 3、创建项目 3.1 vue create 1、简介   在开发大型单页应用时,需要烤炉项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务无关的事情...在Vue.js环境中,这个脚手架工具就是Vue CLI,利用这个工具,可以自动生成一个基于Vue.js地单页应用地脚手架项目。...2、安装 可以使用下面的命令安装Vue CLI npm install -g @vue/cli # 或者 yarn global add @vue/cli Vue CLIVue项目开发中基本是必需的,...因此采用全局安装。...安装完成之后,可以使用下面的命令检查版本是否正确,同时验证Vue CLI是否安装成功。 3、创建项目   安装Vue CLI,就可以开始创建一个脚手架项目了。

96920

VUE-vue-cli

9.vue-cli 9.1.介绍和安装 在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。...幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。...官网:https://github.com/vuejs/vue-cli 安装命令:npm install -g vue-cli 9.2.快速上手 我们新建一个module: ?...用vue-cli命令,快速搭建一个webpack的项目:vue init webpack ? ? 前面几项都走默认或yes 下面这些我们选no ? 最后,再选yes,使用 npm安装 ?...开始初始化项目,并安装依赖,可能需要 ? 安装成功! ? 可以使用npm run dev命令启动。 9.3.项目结构 安装好的项目结构: ? 入口文件:main.js ?

1K20

Vue学习-Vue CLI

前言 本文将介绍Vue-CLI的使用。 ---- Vue-CLI 介绍 CLI:Command-Line Interface,俗称脚手架。...使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。 注意:以下内容主要介绍CLI2和CLI3....使用前提:需要NodeJS和Webpack 基本使用(CLI2) 安装 在终端键入如下命令(注意指定版本号)进行全局安装: npm install @vue/cli -g 如果想按照Vue-CLI2的方式初始化项目需要安装...CLI3 Vue CLI3与2版本的区别: vue-cli3是基于webpack4打造,vue-cli2是webapck3 vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的build和...Vue项目管理器(UI) 在终端键入如下命令: vue ui 则会启动一个本地服务,运行在8000端口,展示Vue项目管理器(如下图): 导入一个项目: 这里就可以利用可视化界面安装插件和依赖,还可以进行项目配置信息的修改

95520

vue.js 三种方式安装(vue-cli)

3)安装vue-cli2 脚手架构建工具(必须在全局中进行安装) 在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。...一、搭建vue的开发环境(大纲) 必须安装node.js 搭建vue的开发环境,安装vue的脚手架工具 官方命令行工具 npm install – -global vue-cli...vue/cli 如果你已经全局安装了旧版本的vue-cli(3.0以下),你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。...Node.js8.9+ 安装vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli 版本是否是3.x vue –version...如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具: npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@

1.4K20

vue-cli

CLI 和 Service 的职责划分如下: CLI: 用于项目创建和管理 全局安装 vue create 创建项目脚手架. 拉取最新的 Service,并选择配置需要的插件 vue ui....启动 UI 管理界面 快速原型开发: vue serve | vue build, 直接伺服和编译一个 Vue 文件 插件管理: vue add | vue invoke 安装插件和调用插件生成器 Service...中按着这个命名约定的依赖会被识别为 vue-cli 插件,另外命名约定也有利于在 github 或 npm 上筛选 生命周期: 一个插件的生命周期可以分为安装阶段和运行阶段. vue create命令创建项目脚手架...、vue add以及vue invoke插件安装命令都属于安装阶段; 而 cli-service 命令执行时属于运行阶段....: prompts: 收集用户意见和配置 gernerator: 在安装阶段生成模板文件 运行时: index.js 注入 service 命令 扩展和修改 webpack 配置. vue-cli 通过

3.1K10

Vue CLI安装和使用element-ui

工具准备: 首先确保系统包含以下环境: 1.安装Node.js 和 npm 通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装Vue CLI...2.安装 Vue CLI npm install -g @vue/cli # OR yarn global add @vue/cli vue --version //查看是否安装成功 3.创建一下项目...element-ui 接下来我们安装element-ui组件(https://element.eleme.cn),这样我们就可以快速开发项目 cd vue-web //进入项目根目录...npm i element-ui -S //安装element-ui 6.完整引入element-ui 安装成功后,打开vue-web/src/main.js文件,添加以下内容 import ElementUI...官网上的组件了 7.运行项目 yarn install //安装依赖 yarn serve //运行项目 8.使用element的导航菜单 打开vue-web/src/App.vue文件

4K00

Vue-cli解析

正文 首先,我们来说一下安装的东西吧!处于有头有尾的目的,还是几句话草草了事。步骤如下: 安装vue-cli 以webpack模版安装目录 这样之后,我们就可以使用IDE打开目录了。...此处注明我的vue-cli的版本2.9.2,以免之后改版之后,误导读者。...module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的可以去看webpack的官方网站。...node => 此处部分有注释,主要是阻止一些webpack的默认注入行为,因为在vue中,已经具备了这些功能。...总结 本篇文章,主要总结了一下vue-cli生成的文件中,其中的一些配置参数和文件大致的作用。有不到位的地方,希望大家可以指正。同时希望我们共同进步,共勉。

1K60
领券