vuecli脚手架搭建

Vue-cli是vue官方出品的快速构建单页应用的脚手架

一.首先要确定安装了node,打开终端输入node -v,查看node版本,输入npm -v ,查看npm版本,如果两个都安装成功可以进入下一步了。

PS: node安装非常简单,自行百度。

二.安装淘宝镜像(此步骤可忽略),因为npm速度较慢

输入命令

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

安装成功后就可以使用cnpm替代npm命令了。

三.安装全局vuecli

输入命令 cnpm install vue-cli -g

四.初始化项目

命令格式:vue init <template-name> <project-name>

其中,<template-name>选项为模板名称,vue-cli官方为我们提供了5种模板。

  • webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。

  • webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。

  • browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。

  • browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。

  • simple-一个最简单的单页应用模板。

<project-name>为项目名称。

 我们选择webpack,输入命令:

vue init webpack vueliTest

 五.按照提示步骤,分别输入命令:

cd vuecliTest

cnpm install

cnpm run dev

 此时服务已开启,搭建完毕,可以查看文件目录,

猜你喜欢

转载自www.cnblogs.com/manru75/p/9752657.html