利用npm搭建Vue项目流程

安装

第一步:下载node

第1.5步: npm安装可能无法下载

npm install -g cnpm --registry=http://registry.npm.taobao.org 

　　使用淘宝cnpm

第二步:使用node的包管理器npm安装vue,可以忽略

npm install vue

第三步安装脚手架

npm install --global vue-cli
//--global的意思为全局安装

通过npm init 创建package.json

1. 　　在自己创建的一个工程目录下打开cmd ,在里面输入命令npm init
2.        按提示，一步步来完成项目文件的配置，没有的可以不写，直接enter,这样初始化时会创建默认的文件
3. 　　或者使用 --yes 默认创建

{
  "name": "luffy",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {  # 这就是项目依赖的插件及版本
    "marked": "^0.3.19",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

为项目添加插件

# 切换到项目目录下
# 为项目添加bootstrap而不是为全局添加
npm install bootstrap --save
# 移除bootstrap的依赖
npm uninstall bootstrap --save
# 指定版本,会使用这个版本的最高版本
npm install bootstrap@3 --save

获取项目依赖的插件

# 项目目录下
npm install  # 下载项目依赖的插件

创建基于webpack模板的新项目

黄色圈圈部分是可选模式

创建项目

vue init webpack my-project # vue init 模式 项目名

然后下面给出了提示信息

cd my-project # 切换进项目目录
npm install # 安装依赖
npm run dev # 运行项目