一、搭建脚手架步骤

需要先安装node.js。使用其自带的npm包管理器工具安装脚手架。关于npm可以查看之前博客：关于npm

1 全局安装@vue/cli

在cmd中使用如下命令全局安装Vue脚手架(第一次安装)

npm install -g @vue/cli

如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org

2 创建cli

切换到你要创建项目的目录下，使用如下命令创建脚手架

vue create xxxx
//xxxx 你的项目名称

创建过程中会出现版本选择提示，根据你开发需要使用的Vue版本进行选择即可。
babel ES6 ===> ES5
eslint 做语法检查的

出现Successfully即表示脚手架创建成功

3 启动项目

根据所给提示操作
进入到创建好的项目脚手架目录中cd 创建的目录名，执行npm run serve就可以看到你的项目了。

复制地址到浏览器中打开可以看到Vue脚手架搭建完成并给我们创建了一个 hello world 案例。

二、分析脚手架文件结构

总结

Q：如何创建一个项目？
A：

1）下载安装node.js ，安装成功即已捆绑安装npm
2）打开cmd输入命令npm install -g @vue/cli全局安装脚手架
3）切换到需要创建项目的目录下，使用vue create xxx(你的项目名称)命令创建Vue脚手架
4）脚手架创建成功即可打开脚手架目录文件进行项目具体代码编写。
5）可执行npm run serve命令运行查看页面效果。

Vue—搭建项目脚手架相关推荐

express + vue 搭建项目
1.创建目录为了方便管理项目,创建根目录,内部分成两部分,server 和 view server 用来搭建 express 框架 view 用来搭建 vue 框架 2.搭建 express 框架 ...
使用springboot和vue搭建项目
文章目录第一步,搭建vue项目 vue的安装创建项目 springboot项目的创建 idea eclipse vue与springboot之间的交互跨域问题登录拦截问题部署问题 sprin ...
vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
vue搭建项目时遇到的一些问题记录
1.用vue-cli模板搭建项目时,在选项 Use ESlint to lint your code(使用ESlint规范代码) 的是时候记得填 no(对于小菜鸟),否则多个空格都会报错 . 2.创 ...
Vue搭建项目：ESLint: clear(vue/comment-directive)
用脚手架搭建vue项目后index报错解决办法去eslint里面添加 "vue/comment-directive": "off"
[Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范和组件化编码规范 3.它适用于企业级的中后台搭建二.快速创建项目 1.安装脚手架 npm ...
Electron + vue搭建项目
声明本人也在不断的学习和积累中,文章中有不足和误导的地方还请见谅,可以给我留言指正.希望和大家共同进步,共建和谐学习环境. 背景最近公司想要开发一款桌面应用,在众多的跨平台桌面框架中,我选择了el ...
有关安装vuex报错error found vue@2.6.14及有关vue搭建项目问题
1.最近再学习vue时安装vuex报错了解决办法这是vue2版本过低,默认需要vue3即升级vue2到vue3即可 npm i vue@3 2.在初始化下载webpack一直卡在这个界面我们这个 ...

Vue—搭建项目脚手架

文章目录