狂神 Vue 第一个vue-cli项目

第一个vue-cli项目

vue-cli提供一个脚手架，用于快速生成一个vue项目模板

预先定义好的目录结构以及基础代码，好比创建maven项目可以选择创建骨架项目，能提高开发效率

需要环境

• Node.js:https://nodejs.org/en/
• Git:https://git-scm.com/download/win
• 镜像:https://npm.taobao.org/mirrors/git-for-windows/

Node安装

• 一直下一步就行

• 安装好cmd检查一下

• C:\Users\haoyun>node -v
  v12.18.3
  
  C:\Users\haoyun>npm -v
  6.14.6
  
  C:\Users\haoyun>
  

• 

• 环境变量会自动配置

• 然后安装一个Node.js淘宝镜像加速器 cnpm

• #-g 就是全局安装
  npm install cnpm -g
  #或使用这个语句解决npm速度慢的问题
  npm install --registry=https://registry.npm.taobao.org
  

• 

• 好慢，先安装着吧

• 卡死的解决办法

• cnpm下载会快点，可能会出现能用但是运行的时候就失败的情况

• 

• 安装完成

• 目录里就多了一些东西

• 

• 

• 安装了一个cnpm

• 

• 测试cnpm安装成功没，如果没有显示，就要去系统路径添加，具体百度

• 安装vue-cli

• cnpm install vue-cli -g
  

• 

• 如果里面由error，按照它的提示来做就行

• 使用vue list可以查看基于哪些模板创建

• 

• 因为编写的是ES6规范的，所以要打包降级，使用webpack可以解决兼容性问题

创建一个vue项目

• 

• 创建一个普通的文件夹

• C:\Users\haoyun> cd C:\Users\haoyun\IdeaProjects
  
  C:\Users\haoyun\IdeaProjects>cd MyVue
  
  C:\Users\haoyun\IdeaProjects\MyVue>vue init webpack MyVue
  

• 进入目录，初始化一个vue项目

• 

• 询问一些东西，名字、描述、作者、Vue build 选择运行时构建，不安装vue router、是否使用ESlint，是否安装测试，是否自动执行npm install命令

• 

• 提示项目命要小写

• 如果是否自动执行npm install命令选了no就要自己到当前目录下 npm install

• npm install会根据项目中的Package.json来安装

• 

• 自己去安装 vue-cli中就会多出好多的包

• 

• 

• 安装后提示有17个漏洞

• 只要按照它的提示就能修复

• 

• 打开项目

• npm run dev
  

• 启动项目

• 

• 已经开始运行了，部署在localhost：8080端口

• 

• 可以使用Ctrl+C终止项目

• 

• 在idea的终端也可以使用命令行，是一样的，如果运行不了，要不然是路径错了，要不然是idea权限不够

• 

• 可以设置以管理员运行此程序

• 认识一下项目

• 

• 可以设置端口，静态资源目录

• 

• 构建、设置、依赖包、src、静态资源