000_x_mac脚手架搭建_命令行

搭建条件

基于 node.js,npm

mac 使用homebrew跑

brew insatll node.js

———homebrew下载了node.js的同时又下载了npm.js

检测是否下载成功：

node -v   
v17.6.0

npm -v
8.5.1

Node.js与Vue-Cli的安装

• npm install 包名：该命令用于安装项目指定包
• npm install 包名 :会下载dependencies和devDependencies中的模块
• npm install 包名 —save: 生产环境依赖的模块dependencies
• npm install 包名 -g: 表示全局安装
• npm install 包名@版本号 ：下载指定版本的第三方包或者命令行工具
• npm uninstall 包名： 卸载指定包
• npm update 包名：更新指定包
• npm start：项目启动；
• npm run build：项目构建

通过npm安装Vue-Cli

Vue-Cli是Vue官方提供的一个命令行工具，也称为Vue脚手架，可帮助我们快速构建Vue项目
安装方法：

npm install --global vue-cli

Webpack的安装与使用

Webpack是一个模块打包工具，可以把前端项目中的js、css、图片等文件都打包在一起，实现项目自动化构建。类似我们使用idea等工具新建项目。

Webpack安装

npm install webpack –g

如果需要安装指定版本，可以在webpack后加入对应版本信息

npm install webpack@5.13.0 –g

Webpack构建项目

先通过方式一cd命令到一个空的文件夹
方式二直接在空文件夹的地址栏中输入cmd进入命令页面
通过vue init webpack xxx (xxx为项目名)
然后根据提示输入对应的数据

• Project name：项目名称，直接回车，项目名必须小写
• Project description：项目描述
• Author：项目作者接下来会让用户选择：
• Runtime + Compiler: recommended for most users 运行加编译，就选它
• Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，我们目前不需要，n回车
• Setup unit tests? (Y/n) 是否安装单元测试，n回车
• Should we run ‘npm install’…….？选择安装工具为npm后回车

To get started:

cd 工作目录

 npm run dev

构建命令

所有构建命令都通过NPM Scripts执行。

npm run dev

• Webpack +vue-loader用于单文件 Vue 组件。
• 状态保持热重载
• 状态保留编译错误覆盖
• 使用 ESLint 保存时进行 Lint
• 源图

npm run build

• JavaScript 使用UglifyJS v3缩小。
• 使用html-minifier缩小 HTML 。
• 将所有组件的 CSS 提取到单个文件中，并使用cssnano进行缩小。
• 所有静态资产都使用版本哈希编译以实现高效的长期缓存，并且使用index.html这些生成的资产的正确 URL 自动生成产品。

npm run unit

• 在测试文件中支持 ES2015+。
• 轻松嘲讽。

npm run e2e

• 在多个浏览器中并行运行测试。

• 使用一个开箱即用的命令：

  • Selenium 和 chromedriver 依赖项自动处理。
  • 自动生成 Selenium 服务器。

npm run lint

运行 eslint 并报告代码中的任何 linting 错误。

总结

快速开始

推荐使用 npm 3+ 以获得更高效的依赖树。

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev