Vue-cli是一个用于快速搭建Vue.js开发环境的脚手架工具，可以帮助我们快速生成Vue项目，同时内置了Webpack、ESLint等插件，大大提高了开发效率。本文将针对Vue-cli的安装与使用进行详细介绍，并附有示例代码。
安装Vue-cli
首先，我们需要安装Node.js环境，建议下载最新版本。然后打开命令行工具，输入以下命令进行安装：
npm install -g vue-cli
安装完成后，使用以下命令创建一个基于Webpack模板的Vue项目：
vue init webpack my-project
其中，my-project为项目名称，按照提示输入项目描述等信息即可。
使用Vue-cli
目录结构
Vue-cli生成的项目目录结构如下：
-- -------------------- ---- ------- --- ----- -- ----------- --- ------ -- ------ --- --- -- ---- - --- ------ -- ------- - --- ---------- -- ------- - --- ------ -- ----- - --- ------- -- --- - --- ------- -- ---- --- ------ -- ------- --- -------- -- --------- --- ------------- -- ------- --- ------------- -- ------------ --- ------------ -- ---------- --- ---------- --- ---------- -- -------- --- ------------ -- --------- --- --------- -- ------ --- --------- -- -------
启动项目
进入项目根目录，输入以下命令启动项目：
npm run dev
该命令将会启动开发环境，可在浏览器中查看效果。
构建项目
在项目根目录，输入以下命令构建项目：
npm run build
该命令将会生成打包后的项目文件，可用于发布。
更改端口
默认情况下，Vue-cli项目将在8080端口启动，也可以通过更改配置文件来修改端口号，打开/config/index.js，找到以下代码：
dev: {
env: require('./dev.env'),
port: 8080,
...
}将port属性的值改为要使用的端口号即可。
示例代码
以下是一个简单的Vue-cli项目示例代码：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
-------------- ---------------
-------
------
---- ---------------
------- ------------------------------
-------
--------- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ------- ------ ------ ---- ---------- ------------------------ - ----- -- -------------- ------ -- --- ----- --- ------- ------- --------- --------- ----------- - --- - --
-- -------------------- ---- -------
-- -------
----------
-----
------ --- -------
------
-----------
--------
------ ------- -
---- -- -
------ -
---- ------ ---------
-
-
-
---------总结
通过本文的介绍，我们可以了解到Vue-cli的安装及使用方法，掌握了如何生成并启动基于Vue.js的项目。使用Vue-cli可以方便快速地进行Vue开发，对于前端开发人员来说是非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b4bd5968c7c53b0da5711