VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/
然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install -g @vue/cli
全局脚手架安装成功之后就可以创建vue项目了
三种创建方式:这里演示第三种
第一种(旧版本创建项目,不推荐):首先要安装依赖包 npm install -g @vue/cli-init 然后命令行输入: vue init webpack my-project 开始创建项目
第二种(新版本可视化创建项目,推荐):通过命令行输入:vue ui 进行可视化创建
第三种(新版本命令行创建项目):通过命令行输入:vue create my-project 开始创建vue项目
步骤一:选择安装方式:第一种自动安装;第二种手动安装建议手动安装选择自己需要的包。

步骤二:选择需要的包进行安装,空格选择,回车确定。这里选择常用的三个包

步骤三: 提示是否选择历史模式的路由,这里选N,哈希模式

步骤四:选择ESLint版本,这里用常规模式:Standard config

步骤五:语法检查方式,选择第一个:保存就检查

步骤六:选择Babel、ESLint文件存放,是单独存放还是存放在一起,这里选第一个单独存放,单独存放便于后期维护

步骤七:提示是否记录此次配置,记录此次配置再次创建项目时可以引用同样的配置,这里随意

回车等待创建完成
然后测试
首先进入创建的项目:cd my-porject 
然后进入项目跑起来~~~ npm run serve

项目成功跑起来之后会有一个哈希地址

复制地址到网页打开,出现下图说明项目成功创建完成!


VUE,基于vue-cli搭建创建vue项目的更多相关文章
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue.js(1)--创建vue实例的基本结构
vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
- Vue之vue自动化工具快速搭建单页项目目录
1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
随机推荐
- Netty实现丢弃服务协议(Netty4.X学习一)
何为丢弃服务(Discard Protocol),丢弃服务就是一个协议,是最简单的协议,它的作用是接受到什么就丢弃什么,它对调试网路状态有一定的用处.基于TCP的丢弃服务,服务器实现了丢弃丢弃协议,服 ...
- Vue-Router中History模式【华为云分享】
[摘要] vue-router的history模式的服务端支持 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端> ...
- 基于webpack实现多html页面开发框架一 准备工作
本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...
- 学习ThinkPHP的第21天---关联预载入、关联统计
ThinkPHP关联预载入 预载入的作用是减少执行SQL语句,进而提升程序的性能. public function join(){ //用于监听SQL Db::listen(function ($sq ...
- Docker系列之MySQL安装教程
Docker系列之MySQL安装教程 有了前面的基础教程Docker系列之常用命令操作手册之后,本博客记录一篇mysql的安装教程 mysql镜像查询命令 docker search mysql 几个 ...
- 调用rest api杀死yarn上的应用
调用rest api杀死yarn上的应用 调用yarn reat api,通过app name 获取application id public static String getApplication ...
- LightOJ 1229 Tablecross
Treblecross is a two player game where the goal is to get three X in a row on a one-dimensional boar ...
- HDU1529-Casher Emploryment(最最...最经典的差分约束 差分约束-最长路+将环变线)
A supermarket in Tehran is open 24 hours a day every day and needs a number of cashiers to fit its n ...
- eviews面板数据的操作
数据结构: 打开eviews File>new>workfile Object>new object > pool 输入城市名称: _bj 下划线加名称(必须是英文),竖着输入 ...
- LR静态存储/动态存储/指针变量脚本说明
在一次教程学习中,看到该知识点并记录了下来,希望与大家共同探讨学习. 一.静态存储与动态存储 静态存储变量通常是在变量定义时就分定存储单元并一直保持不变, 直至整个程序结束.动态存储变量是在程序执行过 ...