Vue学习计划-Vue2--VueCLi(一)准备工作,安装node、vuecli

本文主要是介绍Vue学习计划-Vue2--VueCLi(一)准备工作,安装node、vuecli,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 安装node

  1. 网址:https://nodejs.org/en
  2. 下载LTS版本表示长期支持版本
  3. 说明:
    • node是一个基于Chrome V8引擎的javascript运行环境,让JavaScript 运行在服务端的开发平台
    • vuecli创建的项目必须运行在node环境中,
    • npmnode自带包管理工具,用于下载三方依赖包和运行项目打包等操作
      • npm官网https://www.npmjs.com/,npm中文网http://npm.p2hp.com/
    • 由于npm应用国外网络,可以使用cnpm(中国的npm镜像的客户端)或者yarn代替
      • cnpm
        • 安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
      • -g 表示全局安装
        • 检查:cnpm -v
      • yarn:
        • 安装:npm install -g yarn,
        • 检查:yarn -v

2. 安装vuecli

  1. 安装 npm install -g @vue/cli
  2. 检查 cmd命令提示符中输入vue -V检测版本
  3. 卸载 npm uninstall -g @vue/cli
  4. cnpmnpm命令一样, cnpm卸载失败,使用npm
  5. yarn的安装和卸载
  6. 安装:yarn global add @vue/cli
  7. 卸载: yarn global remove @vue/cli
  8. 注意:
    1. 安装制定版本vuecli: npm install -g @vue/cli@版本号 例:4.5.12
    2. 如果yarn显示安装成功,检测却输出vue不是内部命令,解决方法:
      1. cmd输入yarn global bin 查看可运行程序文件夹
      2. 我的电脑 => 属性 然后配置环境变量 PATH

3. 创建项目

  1. 命令行输入vue create 项目名称
  2. 按需要自定义勾选router,vuex
  3. 演示:E:\ 002 文件下创建项目
      1. 在当前文件地址栏输入cmd,回车,打开控制台
        在这里插入图片描述
      1. 输入命令 vue create my-project
        在这里插入图片描述
      1. 选择第3步,表示自定义,↑``↓选择,enter确认
        在这里插入图片描述
      1. 开始自定义配置,space表示选中\取消选中,a表示全选\反选,i表示反选,enter表示确认,目前我们可以如图选中j即可:
        在这里插入图片描述

      注释:

      1. Babeljavascript编译器,简单来说就是把 JavaScript 中ES6+语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。
      2. TypeScriptjavascript的超集:主要多出了类型系统,和其他的接口,枚举等概念,最终会编译成javascript,有一定的学习成本
      3. Progressive Web App (PWA) Support:可以理解为移动端
      4. RouterVue的路由系统,实现组件间跳转
      5. VuexVue的状态管理
      6. CSS Pre-processorscss预处理,如sass、less
      7. Linter / Formatter:代码规范校验
      8. Unit Testing:单元测试
      9. E2E Testing:端到端测试
      1. 选择vue的版本,因为这是2,所以选择2.x
        在这里插入图片描述
      1. 有一个路由提示,输入y就行(或者直接enter回车,默认选中yes),还有如下图:校验的方式,选择默认第一个即可
        在这里插入图片描述
      1. 校验时机,默认即可
        在这里插入图片描述
      1. 配置文件存在哪里?选择package.json
        在这里插入图片描述
      1. 下面出现的是是否保存当前的配置?
      • 如果输入n ,则进入创建项目,下次创建还需要重新配置;
      • 如果输入y,则需要给该配置起一个名字,下次创建项目,直接选择该名字的配置即可(我起的名字是vue2demo)
        在这里插入图片描述
      1. 回车,即可创建项目,等待就行,创建完项目如图所示:(推荐网不好的朋友先安装好yarn和配置好cnpm,这样创建项目会快很多),我这个是yarn安装的依赖,所以会提示yarn serve,如果是npm安装,会提示npm run serve
        在这里插入图片描述
      1. 我们根据蓝色的命令一次输入,先进入项目文件
        在这里插入图片描述
      1. 输入第二条命令,启动项目,出现访问地址表示启动成功,
        在这里插入图片描述
      1. 浏览器打开地址,访问即可
        在这里插入图片描述
      1. 我们重新打开一个cmd窗口,创建项目查看,会出现刚才我们保存的vue2demo配置项,此时选择直接回车即可创建
        在这里插入图片描述

4. 主要目录分析

示例:
在这里插入图片描述

|- public 模板文件|- index.html 模板html,容器 
|- src 项目核心文件|- assets 静态资源|- components 组件|- router 路由文件|- store vuex文件|- views 页面组件|- App.vue 根组件|- main.js 入口文件
|- package.json 项目依赖配置文件
|- vue.config.js 配置文件
|- yarn.lock 下载依赖的缓存文件

5. 命令

  1. 启动项目npm run serve或者yarn serve, 查看package.json
  2. 打包项目npm run build或者yarn build

6.其他

1. 其他插件(VSCode推荐)
  1. Vue Language Features (Volar) 针对Vue.js开发环境的语言特性插件
  2. JavaScript (ES6) code snippets ES6语法提示
  3. Path Intellisense路径自动补全插件
  4. Auto Rename Tag自动补全标签插件
2. 常见错误解决方法
  1. 安装好node, 控制台输入node -v 提示不是内部变量,设置全局node路径

    1. 右击”我的电脑->属性->高级系统设置->环境变量“
    2. 找到“系统变量中的PATH”,
    3. 双击打开,将安装node的路径新建
    4. win+r打开命名框,输入cmd,打开命令提示符
    5. 输入node检查node版本, 输入npm -V 检查npm版本
  2. 运行项目报错:npm或者yarn : 无法加载文件 ...

    1. 打开powerShell 输入命令:set-ExecutionPolicy RemoteSigned选择A
    2. get-ExecutionPolicy检查
  3. error Delete prettier/prettier 错误解决方案(了解)

  • 原因:罪魁祸首是git的一个配置属性:core.autocrlf,由于历史原因,windows下和linux下的文本文件的换行符不一致。因此,文本文件在不同系统下创建和使用时就会出现不兼容的问题。

  • 解决方法:git config --global core.autocrlf false

这篇关于Vue学习计划-Vue2--VueCLi(一)准备工作,安装node、vuecli的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/465639

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

最详细安装 PostgreSQL方法及常见问题解决

《最详细安装PostgreSQL方法及常见问题解决》:本文主要介绍最详细安装PostgreSQL方法及常见问题解决,介绍了在Windows系统上安装PostgreSQL及Linux系统上安装Po... 目录一、在 Windows 系统上安装 PostgreSQL1. 下载 PostgreSQL 安装包2.

Maven如何手动安装依赖到本地仓库

《Maven如何手动安装依赖到本地仓库》:本文主要介绍Maven如何手动安装依赖到本地仓库问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、下载依赖二、安装 JAR 文件到本地仓库三、验证安装四、在项目中使用该依赖1、注意事项2、额外提示总结一、下载依赖登

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux之计划任务和调度命令at/cron详解

《Linux之计划任务和调度命令at/cron详解》:本文主要介绍Linux之计划任务和调度命令at/cron的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux计划任务和调度命令at/cron一、计划任务二、命令{at}介绍三、命令语法及功能 :at

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何在Mac上安装并配置JDK环境变量详细步骤

《如何在Mac上安装并配置JDK环境变量详细步骤》:本文主要介绍如何在Mac上安装并配置JDK环境变量详细步骤,包括下载JDK、安装JDK、配置环境变量、验证JDK配置以及可选地设置PowerSh... 目录步骤 1:下载JDK步骤 2:安装JDK步骤 3:配置环境变量1. 编辑~/.zshrc(对于zsh

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的