1.使用vue-cli创建前端项目

原文石墨链接： 《1.使用vue-cli创建前端项目》

虽然目前已经升级到vue3，不过我之前写的项目都是vue2写的，记录一下vue2相关的知识与经验，往后再更新vue3的学习经验

参考1：https://www.cnblogs.com/l-y-h/p/11241503.html#_label0_2

参考2：https://www.cnblogs.com/yaoyao-sun/p/10319618.html

 

在已经安装好node的情况下，开始以下步骤↓↓↓

点击查看：安装node教程

 

使用vue-cli创建前端项目（目录）

1.什么是vue-cli

2.全局安装vue-cli

3.创建项目

 

1.什么是vue-cli

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

 

2.全局安装vue-cli

（1）检查npm 版本，建议安装到最新版本。

【命令行查看版本号】

node -v

npm -v

 

【升级npm（可选操作）】

npm install -g npm

 

【修改为淘宝镜像（可选操作）】

npm config set registry "https://registry.npm.taobao.org"

 

（2）安装

（1）检查npm 版本，建议安装到最新版本。
【命令行查看版本号】
node -v
npm -v

【升级npm（可选操作）】
npm install -g npm

【修改为淘宝镜像（可选操作）】
npm config set registry "https://registry.npm.taobao.org"

（2）安装
【全局安装 webpack】
npm install webpack -g

【webpack 4.X 开始，需要安装 webpack-cli 依赖】
npm install webpack webpack-cli -g

【查看版本号】
webpack -v

【全局安装vue-cli】
npm install -g vue-cli

【查看版本号，只可以在非管理员模式下查看】
vue -V、vue --version

 

注：

若出现“Unexpected end of JSON input while parsing near”错误，

命令行输入： npm cache clean --force

 

3.创建项目

（1）创建一个项目文件夹"test"，进入该文件夹

（2）

【下载模板】

vue init webpack testclient

解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中testClient是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在"test"文件夹中生成该文件夹），运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，根据自己的习惯写，如果不想填直接回车默认就好。

自动安装过程省略

（3）打开testclient文件夹，项目文件如下所示，这就是脚手架的作用，搭建工作平台。

Build：项目构建（webpack）相关代码;

config：配置目录，包括端口号等。

node_modules：npm加载的项目依赖模块

src：这个目录当中的内容包含了我们基本上要做的事情，这里包含了几个文件

        assets：存放图片

        components：存放组件文件

        App.vue：项目入口文件，组件也可以直接写在这里不适用components

        main.js：核心文件

static：静态资源目录

test：初始测试目录

.xxxx：配置文件，包括git配置和语法配置等

index.html：首页

package.json：项目配置文件

README.md：说明文档

 

(4)运行项目

idea打开项目，在项目终端输入

npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。