脚手架的安装及配置过程

脚手架：已经拥有标准文件夹结构和核心功能的半成品项目
脚手架的优点：标准化;避免重复编码

安装专门生成脚手架项目副本的命令行工具/cli —— 准备工作
npm是随同node.js一起安装的包管理工具，能解决node.js代码部署上的很多问题

由于npm的默认仓库是国外的，慢且不稳定，所以，改变npm的默认仓库：
设置npm的默认仓库为国内的淘宝镜像2种(选一种即可)：

 (1）npm config set registry http://registry.npm.taobao.prg确认是否成功 npm config get registry 返回淘宝镜像即成功(2）npm o -g cnpm --registry=http://registry.npm.taobao.org (备选方案)确认是否成功 cnpm -v 看到版本号即成功**注意：若第一种方法失败，可以选第二种方法**

用npm或cnpm反复生成脚手架项目的命令行工具
2种方法选择1种即可：

 (1)用npm安装：npm i g @vue/cli如果出现FEXIST错误，进入出错提示中的路径，默认为：C:\Users\登录操作系统的用户名\AppData\Roaming\npm\node_modules删除@vue文件夹(2)若npm出错，换成：cnpm i g @vue/cli**注意： 验证@vue/cli是否安装成功：vue -V看到版本号说明成功了**

用脚手架命令行工具为本次项目创建一套脚手架代码副本
(1)先找到要创建项目的文件夹位置
(2)在当前位置，地址栏输入cmd，回车，在当前路径打开命令行窗口
(3)在命令行中：vue create 自定义项目名
然后开始配置：

1). ? Please pick a preset: (Use arrow keys)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
//手工选择 Manually select features

2). ? Check the features needed for your project:
(Press `<space>` to select,  `<a>` to toggle all, `<i>` to invert selection)( )Choose Vue version //因为3暂时时预览版，不是正式版，所以暂时用2   (*) Babel//翻译工具，把时髦的ES6,ES7代码翻译为大多数浏览器认识的ES5代码   ( ) TypeScript //在angularjs中学习( ) Progressive Web App (PWA) Support   (*) Router //单页面应用的核心   (*)Vuex    //Vuex专门为vue.js应用程序开发的状态管理模式( ) CSS Pre-processors//如果你的项目用到了sass/less，才选   ( ) Linter / Formatter//初学者暂时不选，linter是代码质量检查工具，它会将不规范的代码也抛出成警告或错误！   ( ) Unit Testing   ( )E2E Testing

3). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N

i. vue中有两种路由导航模式:#hash方式和history方式(/，没有#)
ii. 如果不想看到url中出现#，可切换为history方式
iii. 一旦切换为history模式，则必须配置服务器端的首页重定向功能！
iv. 所以，在学习阶段不建议启用history模式！

4). ?Where do you prefer placing config for Babel, ESLint, etc.? 将配置信息放在那里？
In dedicated config files//分别放在不同的配置文件中

In package.json//统一都放在一个package.json文件中

5). ? Save this as a preset for future projects? (y/N)N
是否把以上选择都作为将来所有项目的预设
因为每个项目的需求和特征都不同，所以最好每次都选择一遍！如果报错:
EUNSUPPORTEDPROTOCOL错误，可以把上边(1)->b中的https换成http，试试。
或者卸载nodejs，重新安装新的LTS版nodejs。
6). 看到: Successfully created project xzvue.
� Get started with the following commands:

$ cd xzvue $ npm run serve 说明安装成功。

新安装的脚手架中已经带有核心功能和两个示例页面：

(0). 删除项目文件夹中的.git文件夹
(1). 用vscode打开刚安装的项目文件夹
(2).右键单击package.json文件，选择在集成终端中打开
(3). 当打开的终端窗口中出现光标输入提示/xxx>，就输入npm run serve 如果npm run serve出错，可重启vscode，或重新安装vscode
(4). 看到DONE Compiled successfully，说明项目编译和启动成功
(5). 按住ctrl，点下方的localhost:8080链接，在浏览器中打开

脚手架的安装及配置过程相关推荐

win7下python的安装与配置_Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程...
以此文记录Python与Tensorflow及其开发环境的安装与配置过程,以备以后参考. 1 硬件与系统条件 Win7 64位系统,显卡为NVIDIA GeforeGT 635M 2 安装策略 a.由 ...
windows mysql源码安装配置_windows下MySQL5.6版本安装及配置过程附有截图和具体介绍...
随着MYSQL版本的升级以及电脑系统的变化,我们给大家整理了种种电脑环境下安装MYSQL的图解过程,希望我们整理的内容能够帮助到大家:mysql安装图解总结 https://www.in68.com/ ...
mysql安装与配置的截图_windows下MySQL5.6版本安装及配置过程附有截图和详细说明...
随着MYSQL版本的更新以及电脑系统的变化,我们给大家整理了各种电脑环境下安装MYSQL的图解过程,希望我们整理的内容能够帮助到大家:mysql安装图解总结 https://www.jb51.net/ ...
php什么设置前端代码,代码编辑器与PHPSTUDY的安装与配置过程（前端第一课）
前端第一课:编辑器与PHPSTUDY的安装与配置过程编辑器安装过程 1.Visual Studio Code 官网下载软件,解压下载文件,打开安装程序安装至你的计算机. 2.安装"Chin ...
Win7上Git安装及配置过程 [转]
文档名称 Win7上Git安装及配置过程创建时间 2012/8/20 修改时间 2012/8/20 创建人 Baifx 简介(收获) 1.在win7上安装msysgit步骤: 2.在win7上安装T ...
SQL Server 2008安装和配置过程
下面我将用图解的方式,来介绍SQL Server 2008安装和配置过程,希望对大家有所帮助. 闲言少叙,直奔主题!点击setup.exe安装文件后,如果系统没有以下组件,则会出现如下提示! 安装20 ...
图解MySQL5.5详细安装与配置过程
出自:http://www.dbhom.com/show.aspx?id=77&cid=9 MySQL是一个开源的关系型数据库管理系统,原由瑞典MySQL AB公司开发,目前属于Oracle公 ...
linux下面的j2sdk的安装和配置过程
linux下面的j2sdk的安装和配置过程! 1.下载一个Linux Platform的JDK,建议下载RPM自解压格式的 (RPM in self-extracting file,j2sdk-1_4 ...
CentOS 安装 tomcat 环境安装及配置过程完整版
CentOS 安装 tomcat 环境安装及配置过程查看安装包信息 yum info tomcat 安装 yum -y install tomcat 查看是否安装成功 rpm -q tomcat 输 ...
kafka安装及配置过程
来来先扫一下,一码不扫何以扫天下简介 Kafka是LinkedIn开源的分布式发布-订阅消息系统,目前归属于Apache顶级项目.Kafka主要特点是基于Pull的模式来处理消息消费,追求高吞吐量, ...

脚手架的安装及配置过程

脚手架的安装及配置过程

脚手架的安装及配置过程相关推荐

最新文章

热门文章