Vue脚手架Vue-cli教程,常见出错总结(Vue学习总结)

1. 什么是Vue-cli?

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。可以通过@vue/cli搭建交互式的项目脚手架。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。

2. 基本步骤

1. 安装node.js

Vue-cli脚手架是基于node上的,所以第一步就是安装node.js。node.js的下载安装步骤很简单。
先进入node.js官网 https://nodejs.org/en 建议安装稳定版本,如图所示。

后续步骤一直点下一步就OK。
安装好之后打开cmd命令行工具,输入node-v,如果显示版本号,说明安装成功了。
在这里插入图片描述

2. 安装cnpm

cnpm是淘宝团队做的国内镜像,直接在命令行工具中输入

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完成之后使用 cnpm-v来测试是否成功安装,

3. 安装Vue-cli脚手架。

因为之前我们已经安装好了cnpm淘宝镜像,所以我们使用命令:

cnpm install -g @vue/cli

-g 的意思是全局安装,就不要配置环境变量,很方便。

安装完成后在命令行工具中输入Vue查看是否安装成功
在这里插入图片描述
查看Vue版本:
vue-V (注意V要大写,不然出不来)

4. 创建项目

在你要创建的文件夹下打开cmd命令行工具。

vue create 项目名

如果出现
在这里插入图片描述
则需要把上面提示的命令在cmd中运行。

此时可能遇到这个报错。如下图所示。在这里插入图片描述
解决办法:

  1. 以管理员方式运行powershell
  2. 输入命令 set-ExecutionPolicy RemoteSigned,然后按回车
  3. 选择A选项就可以了。
    在这里插入图片描述

3. 创建项目的步骤

1. 输入命令 vue create 项目名称

在你想创建项目的文件夹下输入命令:

vue create test1   //test1为项目名称

2. 选择配置步骤

选择最后一个手动配置。按下回车

Please pick a preset:    
  default (babel, eslint)    //默认
> Manually select features   //手动配置

接下来:

() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router //路由
( ) Vuex
( ) CSS Pre-processors //CSS预处理
(
) Linter / Formatter
( ) Unit Testing //单元测试
( ) E2E Testing //e2e测试

想选择哪个就按下空格键,哪个部分就会成选中状态。配好了之后按下回车进入下一个页面。
Next:

> In dedicated config files
  In package.json

一般选择第二个选项,把配置放在 package.json文件中,

然后等待项目自动创建完成。

项目目录说明

项目创建好之后的目录:
在这里插入图片描述
说明:

node_modules : 用来存放包管理工具下载安装的包的文件夹,打包时不需要。
public:公共资源
src:源文件
.browserslistrc:项目配置工具
.gitignore: git配置
babel.config.js:转码器
package.json:项目依赖文件
README:说明文档

萌新总结,如有错误之处,欢迎指出,共同学习!

猜你喜欢

转载自blog.csdn.net/qq_41497756/article/details/107872620
今日推荐