vue 最详细教学篇（二）

vue-cli

介绍

vue-cli 脚手架 顾名思义 搭建东西的那个架子 也就是用来搭建大型项目的工具
程序员在开发过程中 vue-cli 会热更新视图 提高开发效率

准备工作

• 1 vue-cli 命令是基于 node.js 的 所以要先安装 node.js
• 2 检查是否安装了 node.js 只需 window + R 打开运行对话框 输入 cmd 打开命令行窗口
• 3 在窗口内输入 node --version 弹出版本号表示已经安装过了

node --version

• 4 如果没有安装 请移步此处点击>> 因为网上已经有很多详细教程 这里不多说

安装 vue-cli

• 1 当确定安装好 node.js 后
• 2 重新打开 cmd 命令窗口输入：npm install -g @vue/cli 就可以 全局 安装 vue-cli 了

npm install -g @vue/cli

如此就完成了 vue-cli 的安装

创建项目

• 1 图形化界面创建
  (1) 第一步、创建 Vue 项目所在文件夹
  (2) 第二步、在文件夹中打开 cmd
  (3) 第三步、输入 vue ui 命令打开图形化界面
  不细说

vue ui

• 2 命令行创建 细说

命令行创建

• 上下键可调节选项 space空格键 选中或者取消 回车键下一步

可能遇到的问题

• 如果是第一次创建 应该是会遇到问题的，上下键不能正常选取功能
  找到 ~/.bashrc(如默认路径: C/Program Files/git/etc/bash.bashrc) 文件，将文件打开( vscode/记事本 都可以打开)。将 alias vue=‘winpty vue.cmd’ 加在最后面。 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。）
  官网提示>>

alias vue='winpty vue.cmd'

正式创建

了解可能出现的问题 和 解决问题后就开始创建第一个 vue 项目了

• 1 输入 创建项目指令 vue create test_02， test_02 是项目名称

vue create test_02

• 2 弹出内容依次是 vue2 默认创建 vue3 默认创建 和 自己选取功能 基本都是自己选择性创建项目
• 3 选择功能 按需选择 比如 router vuex 这些
• 4 选择版本 2.x 就是 vue2 版本 3.x 就是 vue3版本 按需选择
• 5 路由器是否使用历史模式 按需选择（有路由 / 哈希 两种模式 我自己常用哈希 选 n 路由模式介绍>>）
• 6 将Babel、ESLint等的配置放在哪里 两个选项 1 分开放 2 统一放 package
• 7 是否保存为以后项目的配置 一般都是 n 因为可能需求不一样
  
  以上 7 步完成后 等待安装包下载完毕 出现类似以下 cd test_02 / npr run serve 等字样
  那么恭喜你 你的第一个 vue 项目已经诞生
  
  此时 你可以在输入框输入 cd test_02 进入到项目
  然后输入 npm run serve 回车，此时要做的就是等待项目启动
  
  在看到 http://localhost:8080 时，项目已经启动 它正在等待着你的光临

如上图 复制 http://localhost:8080 到浏览器 回车就能看到项目启动的样子了

也可以把项目文件拉到 vsCode 编辑器里在终端 启动

如此 vue-cli 创建一个完整的项目就 ok 啦

本篇完

• 上一篇>>
• 下一篇>>
  

感言

谢谢您的耐心阅读 有不足之处 望各位看官指正
在 vue 的长河里我们一起遨游 让我们拥有了共同的目标
在此祝您 步步高升！