Windows 使用Vue-Cli或@Vue/Cli(Vue脚手架)创建Vue项目

前言

vue-cli这个构建工具大大降低了webpack的使用难度，支持变动代码即更新，有webpack-dev-server的支持，相当于启动了一个请求服务器。但是我在网上找到了两种vue脚手架，发现@vue/cli更好用一点，建议使用。

Vue-Cli脚手架

安装webpack

使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：
注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令npm install webpack webpack-cli -g

npm install webpack webpack-cli -g

安装vue-cli

全局安装vue-cli，在cmd中输入命令:

npm install vue-cli -g

安装完成之后输入 vue -V（注意这里是大写的“V”），如上图，如果出现相应的版本号，则说明安装成功。

使用Vue-Cli创建项目

输入

vue init webpack vueclitest(项目名称)

项目	Value
Project name	项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
Project description	项目描述，也可直接点击回车，使用默认名字
Author	作者
Vue build	Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了.Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
Install vue-router?	是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code?	是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
Pick an ESLint preset	选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Set up unit tests	否安装单元测试，我选择安装y回车
Pick a test runner	选择一个测试，默认jest解析器即可
Setup e2e tests with Nightwatch?	是否安装e2e测试 ，我选择安装y回车
Should we run npm installfor you after the project has been created? (recommended)	使用npm安装库文件

运行默认服务器

按照提示输入命令

cd .\vueclitest\
npm run dev

出现下图则标识编译完成

访问http://localhost:8000

文件目录

安装完成后进入文件目录可以看到

@Vue/Cli脚手架

安装@Vue/Cli

npm install -g @vue/cli

输入vue -V出现版本提示则安装成功

创建项目

在项目文件夹中输入以下指令创建项目

vue create cli-demo

选择vue版本

这里选Vue 2

选择包管理器

选择你使用的包管理器

选择完成后等待创建成功

进入项目文件

根据上面提示，使用cd cli-demo进入船舰好的项目文件夹。

开启服务器

如果你使用npm

npm run serve

使用yarn

yarn serve

开启成功后根据提示访问网址

项目文件夹

目录大致跟vue-cli创建的项目一致