使用npm构建vue安装和项目打包笔记


工具说明

  • npm -v 和 node -v

    npm 是Nodejs下的包管理器,下载地址:https://nodejs.org/en/

  • webpack

    资源的一宗打包方式,通过CommonJS语法。

  • vue-cli

    用户生成Vue工程模板工具,vue脚手架

  • cnpm

    cnpm 是淘宝定制的命令行工具,可完全替代npm
    配置淘宝镜像:npm config set registry https://registry.npm.taobao.org

配置初始化npm

初始化package.json

$ npm init -y
Wrote to D:projectypackage.json:

{
  "name": "projecty",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装vue.js和vue-cli脚手架

使用npm安装vue模块
npm install vue

使用npm安装vue-cli脚手架
npm install --global vue-cli

使用cnpm(为了快,有的也说会出现问题)

#升级npm到global目录
cnpm install npm -g

#覆盖安装cnpm
npm install cnpm -g --force

#使用cnpm安装模块vue
cnpm install vue

#安装vue脚手架工具
cnpm install --global vue-cli

初始化vue项目和依赖

初始化vue的webpack项目(可缺省全部回车):

vue init webpack helloworld2

命令执行完会提示:

found 101 vulnerabilities (76 low, 9 moderate, 15 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

Running eslint --fix to comply with chosen preset rules...
# ========================

> helloworld2@1.0.0 lint D:\projectv\helloworld2
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!
# ========================

To get started:

  cd helloworld2
  npm run dev

使用git等检出的项目,需要直接npm install安装node依赖模块

最后,执行npm run dev 即可本地打开一个监听,浏览器访问http://localhost:8080

vue项目打包dist静态文件

在项目根目录执行 npm run build

其它问题

  • 如果提示npm ERR! A complete log of this run can be found in:

表示本地脚手架版本与全局脚手架版本不一致,执行npm install npm -g更新一下


版权声明,转载请附上原文链接及本声明: https://blog.yongit.com/note/182172.html