VUE学习5-安装cli

通过脚手架cli可以快速进行模块化开发,并且可以规范开发模式。Vue单文件组件可通过webpack等构建出浏览器可以显示的文件。

在MacOS上安装Vue cli步骤如下:

⚠️注意: 建议使用cnpm进行安装,并且全局安装需要sudo管理员模式。

  1. sudo cnpm install -g @vue/cli(安装完毕可以使用vue -V检查)
  2. cli安装完毕后,terminal进入工作目录,mkdir合适的父文件夹
  3. vue create myapp (myapp为工程名)创建过程中,选择合适的配置。
  4. 由于网速等原因,一些node_modules可能安装失败。。。因此cd到myapp文件夹中,rm -rf node_modules,使用cnpm i 按照package.json进行手动安装包。
  5. 安装过程中,可能还会出现peerDependencies WARNING,事后手动再次使用cnpm install node-sasscnpm install fibers(这两个node包是我安装过程中失败的,需要重新安装)。
  6. 安装完毕,配置git版本控制即可开始使用。
MacOS上安装cli需要sudo管理员权限
安装完毕 vue版本查看
cnpm按照package.json安装,也可能出现个别包的安装错误
与GitHub同步时,提醒邮箱设置有问题。
解决方法如下图,在GitHub主页的设置中,右侧Email->取消选择保持email私密
由于将ssh id_rsa.pub部署到了全局,因此需要将email取消private

使用过程中常用命令:

  1. npm run serve 开发环境的构建
  2. npm run build 生产环境的构建
  3. npm run lint 代码检测与自动修正工具

通常,开发环境中代码位于src文件夹中,而经过build编译后的代码位于dist文件夹中,可供后端上线。

项目入口文件:src/main.js