怎么用webstrom使用vue-cli创建项目

1、什么是vue-cli

CLI(command line interfaces )命令行接口。在进行Vue项目开发时,可以选择不同的Vue模板进行项目的搭
建,比如simple、webpack-simple、webpack、browserify/browserify-simple等;vue-cli是官方提供的一个脚
手架(预先定义好的目录结构及基础代码,咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚
手架),用于快速生成一个 vue 的项目模板。

 2、安装node.js和vue-cli

  • **下载安装node.js   

https://nodejs.org/en/download/**

  • 在node.js的cmd组件(command prompt)中安装vue-cli

如果npm命令太慢了,可以使用淘宝镜像 http://npm.taobao.org/ ,此时使用cnpm代替npm

1# 1. 安装cnpm 2npm install -g cnpm --registry=https://registry.npm.taobao.org 3# 2. 使用cnpm代替npm 4cnpm install 5cnpm run dev 6cnpm run build 7

3、安装webpack 

 

1cnpm install webpack-cli -g  2

4、用webstorm创建vue-cli项目 

file --> new --> project , 选择vue.js, 然后配置项目路径 ,node.js的执行路径 , vue-cli 的安装路径。

 

 

当所有安装包下载完成之后我们就可以启动我们的项目了

 

如果npm install太慢,我们在控制台中输入

1cnpm install 2

 

 5、运行项目 

先点击Run —> 配置 -->apply

 

6、项目目录介绍

 接下来,我们对vue-cli中的各个项目进行分析,方便我们以后的开发中能够更好的进行管理

 

代码交流 2021