用Vue-cli从头搭建项目
vue-cli ,vue项目脚手架的意思。通过一些命令行工具,帮你配置好项目开发运行,打包全过程,最后只关注你的逻辑代码部分。基于webpack,基本实现零配置。
首先准备一个空文件夹,打开命令行工具进入该空文件夹
1. 安装
npm install -g @vue/cli
查看是否安装成功
vue --version
出现版本号说明安装成功
2. 命令行创建项目
运行以下命令来创建一个新项目:
vue create hello-cli
会出现如下提示框,可通过上下键选择
你可能只看到这个
原因是我在本地新建过项目会保留我的配置。
选择 Manually select features 然后回车(通过自定义项目不使用默认配置)
注意: 记住到了这步未完成配置之前不要回车、、、
babel 是把最新的代码兼容到当前浏览器都兼容的es5或者3 如果是用es6代码,那一定要选择
TypeScript 基于js的超集,说是另一门语言也不为过 如果想用那是必选的
Progressive Web App (PWA) Support PWA的支持
Router 即 vue-router vue官方推荐路由 肯定是要用
Vuex vue的状态管理工具 要用
CSS Pre-processors Css预处理语言的使用 使用,我要使用scss, 如果不用可以不选
Linter / Formatter 代码检查和格式化工具 主要为了团队配合开发使用
Unit Testing 单元测试
E2E Testing E2E测试
根据自己的选择 选择就按空格,全部选择完成,回车 继续
下边是我的选择
然后提示这个
是否使用css 组件系统 当然选择是
中间一些选择略过,展示下我的选择
个人倾向选择保存的时候检查。
选择单独文件生成
然后结束就会自动开始安装
选项越多安装越多。需要一点点时间。
证明安装成功
根据提示进入项目
cd hello-cli
运行项目
npm run serve
说明已经跑起来了
访问一下
成功。
看一下项目代码目录
不仅初始化了git仓库,还把项目需要的基本设定完成,非常给力了。
3. 可视化方式创建
这个更简单。
找一个文件夹 命令行进入
vue ui
然后就是等一会
正常会自动弹出页面,不不能,则手动输入上边的地址
出现这个页面。
因为我这是已经有创建过的项目。所以点击左上角下拉框箭头,选择vue 项目管理器
然后点击新建,选择一个文件夹
然后就是和命令行一样,下一步,下一步,按照你的选择完成项目创建
用Vue-cli从头搭建项目相关推荐
- vue和SpringBoot搭建项目(原创)
1.element官网 https://element.eleme.cn/#/zh-CN/component/installation 2.element介绍 Element:网站快速成型工具.是饿了 ...
- Vue菜鸟入门--搭建项目
一.介绍 vue-cli 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: cli:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- vue3 @/cli脚手架搭建项目
创建一个工作目录: 按住shift键,右键此工作目录打开powershell窗口 (s) 输入:start cmd就进入到cmd下面 输入命令:vue create 项目名称 然后按回车! 进入预设, ...
- Vue CLI构建SPA项目教你手把手创建SPA项目
下载安装Vue-CLI 官方文档:https://cli.vuejs.org/zh/ 首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本. 然后,我们就可以使用 npm 来安装 vue/ ...
- Vue CLI 3搭建
卸载旧版本 vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本. 卸载指令:npm uninsta ...
- vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...
- vue CLI脚手架搭项目
1.安装 node.js环境 官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到 安装完成后cmd打开终端,输入node -v ,npm - ...
- 通过Vue CLI 4创建项目
1.安装Vue CLI 4 前提是你已经安装了Node(自带npm),Node版本要求:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上). Vue CLI 的 ...
- Vue CLI脚手架新建项目
Windows PowerShell 版权所有(C) Microsoft Corporation.保留所有权利.安装最新的 PowerShell,了解新功能和改进!https://aka.ms/PSW ...
最新文章
- Android开发学习笔记:WebView 一
- leetcode算法题--栈的压入、弹出序列
- 北风设计模式课程---13、享元模式
- VTK:vtk3DSImporter用法实战
- 【Java面试题】49 垃圾回收的优点和原理。并考虑2种回收机制。
- leetcode 字符串中的第一个唯一字符
- mysql ddl分类_MySQL语言分类——DDL
- 爬虫python是干什么的_爬虫是什么?能自学嘛
- caffe的python接口学习(1):生成配置文件
- python 将繁体转换成简体
- Rdd,DataFrame和DataSet的区别
- 物业设备与设施管理【2】
- 【MATLAB】MATLAB 仿真数字基带传输系统 — 双极性基带信号(余弦滚降成形脉冲)的眼图
- 【Git】Git 分支管理 ( 创建并切换分支 | 查看分支 git branch | 合并分支 git merge dev | 删除分支 git branch -d dev )
- 挣值管理(PV、EV、AC、SV、CV、SPI、CPI)
- 全国计算机自考应用题,近几年度自考管理系统中计算机硬应用题汇总.doc
- C语言无符号数赋值为负数时的%d%u输出问题解释
- 域名解析配置 以及 修改DNS服务器(腾讯云域名注册商、阿里云DNS服务器)
- 【分库分表】企业级分库分表实战方案与详解(MySQL专栏启动)
- 【Python】用sympy判断函数的单调性和极值
热门文章
- java 判断图片合适,Java 判断图片色彩
- Linux与网络服务(一)网络服务相关概念通俗解释(科普向)
- easyUI easyui-datagrid (良好习惯:onClickRow,onSelect 都写上,事件同步)
- Apollo Planning决策规划算法代码详细解析 (13): RuleBasedStopDecider
- 女性程序员你需要注意
- OSChina 周三乱弹 ——送你们个漂亮妹子!
- HTTP状态码(200、302、404、503)
- IP输出不足,端游手游化时代的单一手游企业如何破局?
- 什么是Apache Isis
- ARM CHI总线笔记