安装vue-cli&使用vue-cli搭建项目

顾轻舟。

已于 2022-09-26 20:35:06 修改

阅读量5.2k

点赞数 7

分类专栏： vue 文章标签： vue.js webpack javascript 前端框架

于 2022-09-26 20:28:23 首次发布

本文链接：https://blog.csdn.net/qq_64001795/article/details/127059736

版权

本文详细介绍了如何使用vue-cli安装和构建项目，包括安装前提、vue-cli概念、安装过程、创建项目骨架、安装模块、修改端口号、添加element-ui、package.json解析、install命令参数解释以及项目结构说明。此外，还深入讲解了.vue文件、启动过程，并提供了开发示例，如创建自定义组件和嵌套路由。

摘要由CSDN通过智能技术生成

3. install命令中的-g, -S, -D参数

7.2 增加“用户管理”和“关于我们”组件

7.3 嵌套路由

1. vue-cli安装

1.1 安装前提

在安装vue-cli前需要先确定nodejs环境安装好，验证nodejs环境安装：

node -v
npm -v

1.2 什么是vue-cli

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。
创建命令：

vue init webpack xxx

xxx 为自己创建项目的名称
必须先安装vue,vue-cli，webpack，node等一些必要的环境

1.3 安装vue-cli

命令：

npm install -g vue-cli

安装成功后会在配置的node_global\node_modules目录下会看到vue-cli目录。

在cmd窗口输入如下命令，验证vue安装是否成功，注意：这里的V是大写。如果成功会打印版本号

vue -V

2. 使用vue-cli构建项目

2.1 使用脚手架创建项目骨架

在cmd命令窗口，到项目存放目录，运行如下命令：

vue init webpack spa1

spa1为项目名，根据实现输入即可。

注1：cmd命令行窗口显示中文乱码，多是因为cmd命令行窗口字符编码不匹配导致, 修改cmd窗口字符编码为UTF-8，命令行中执行：chcp 65001, 切换回中文：chcp 936, 这两条命令只在当前窗口生效，重启后恢复之前的编码。不能管。

接下来，安装程序会进入一问一答的安装模式：

1）Project name：项目名，默认是输入时的那个名称spa1，直接回车
2）Project description：项目描述，直接回车
3）Author：作者，随便填或直接回车
4）Vue build：选择题，一般选第一个

Runtime + Compiler: recommended for most users //运行加编译，官方推荐

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//仅运行时

5）Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件
6）Use ESLint to lint your code：是否用ESLint来限制你的代码错误和风格。N

Set up unit tests (Y/n) N
7）Setup e2e tests with Nightwatch?：是否安装e2e测试 N
8）Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM (选择该项即可)
> Yes, use Yarn
> No, I will handle that myself