vue-cli创建vue项目详细步骤

一、安装node环境（建议使用LTS）

Download | Node.js

二、下载vue和vue-cli脚手架

命令：npm i -g vue ; npm i -g @vue/cli

三、在想要创建的位置路径下打开cmd（直接点击路径输入cmd即可打开当前位置的终端）

四、创建vue项目，输入命令（ vue create 项目名称）

五、进入详细选择

(上下方向键选择,空格键确定,enter进入下一步)

1、默认vue2版本和默认vue3版本都是有Eslint和Babel的，Eslint是代码规范的，Babel是将ES6转化为ES5的。（这边新手不建议安装有Eslint的，所以选择自主配置--最后一种）

（按 space 键来进行是否选择，一般建议以上已勾选的选择）

Babel：es6 转 es5
Router：路由
Vuex：数据容器，存储共享数据
CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等
Linter / Formatter：代码格式校验（一般情况下默认勾选了，记得取消！！！）

2、选择vue版本--目前选择2版本

3、是否选择history路由模式，（这里选择“N”）

4、选择css预处理器，一般选择Less

5、Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中
这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

6、是否将刚才的选择保存起来，下次可以直接用，一般选择N，可以根据自己需要选择

7、开始创建，创建完成后可以打开文件

命令： cd 项目名称是选择定位到项目

命令：npm run serve 则是运行项目，运行的项目就是刚刚cd项目的项目

8、运行项目后，出现如下页面就算是创建成功啦

vue-cli创建vue项目详细步骤相关推荐

使用Vue cli创建Vue项目
使用Vue cli创建Vue项目第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
Axure创建团队项目详细步骤
1.打开Axure,顶部导航栏,创建当前文件为团队项目,选择团队--从当前文件创建团队项目 2.页面显示创建团队项目弹框,输入团队项目名称和新建工作空间,输入后点击创建团队项目按钮提交弹框 3.提 ...
IDEA快速创建maven项目详细步骤
目录前言必读: 1.Maven和Maven Archetype区别? 2.创建maven项目之前的步骤(必看) 一.创建maven 1.打开idea--->文件--->新建---> ...
如何创建Git项目详细步骤
更多内容,点击了解: https://how2j.cn/k/git/git-create/1343.html 目录步骤 1 : 把自己的项目共享到Git上步骤 2 : 在Git上新建仓库步骤 3 ...
IDEA中创建maven项目详细步骤，很清晰
前言在IDEA中创建Maven项目,前提是已经安装配置好Maven环境 . 如还未配置安装Maven的,请先下载安装.如何下载安装,可参考我另外篇文章: maven的下载与安装教程本篇教程是以创建 ...
php+sql创建本地项目详细步骤1——创建数据库数据表，数据库连接
一.我们使用wamp,首先保证wamp打开,服务打开状态二.创建数据库,创建表要注意这里的数据集要选择utf8,否则插入数据会乱码创建表选择高级属性,也要设置数据集可以设置id为主键并且自增长 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...

vue-cli创建vue项目详细步骤

vue-cli创建vue项目详细步骤相关推荐

最新文章

热门文章