Vue-Cli搭建,(脚手架), webpack搭建

一,什么是vue-cli

  vue-cli官方提供的一个脚手架,用于快速搭建vue基本项目

  

二,需要的环境:

  Node.js:http://nodejs.cn/download/

  Git:http://git-scm.com/downloads

  镜像:https://npm.taobao.org/mirrors/git-for-windows/

  

`  确认nodejs安装成功:

  •   在cmd下输入 node -v,查看是否打印出版本号
  •   在cmd下输入 npm -v,查看是否打印出版本号

  注意:npm,就是一个软件包管理工具

  安装Node.js淘宝镜像加速器(cnpm),下载速度会更快

  注:能用npm(官方)的就用官方的,用加速器有一定几率触发未知的错误

# -g 就是全局安装
npm install cnpm -g  全局安装淘宝镜像

# 或者用如下语句解决npm速度慢问题
npm install --registry=https://registry.npm.taobao.org

  

  安装vue-cli

cnpm install vue-cli -g

到这里vue的基本开发环境就搭好啦,下面要搭建vue项目

三,Vue项目搭建

  1.创建一个Vue项目(随便建一个空文件夹)

    eg:E:vuestudy

    注:cmd指令也要在此路径处执行(2)的语句

  2.在cmd中输入如下指令

     在此处执行

    

  #其中myvue是文件夹名字

npm init webpack myvue

最后,初始化并执行:

  cd myvue    跳转到创建的Vue项目文件夹下

  npm install    npm下载

  npm run dev    执行

  打开Terminal窗口按键盘【Ctrl】+【C】,提示是否关闭,键盘输入 【y】退出      关闭vue项目

代表成功,输入里面网址验证

注意:在Vue项目的config/index.js中可以修改端口号

三,webpack搭建

  说明:webpack是Vue的打包工具,

     Vue的特点就是模块化编程,那么webpack就应运而生了

安装:cmd指令(在那个路径下都行)

npm install webpack -g
npm instal webpack-cli -g
 

 测试:webpack -v    webpack-cli -v

注意:在当前文件路径出输入webpack可实现打包操作

   本文的vue-cli,npm镜像和webpack都是用到全局的

原文地址:https://www.cnblogs.com/CL-King/p/14017238.html