Vue项目化

本文章主要讲述如何通过 Vue.js 脚手架工具构建 Vue.js 项目。

要创建一个Vue项目，需要确保电脑已经安装了Node.js和npm（Node Package Manager）。

---

下载安装node.js

如果没安装有node.js，可以去官网进行下载安装，下载之后一步步默认安装即可。下载 | Node.js 中文网https://nodejs.cn/download/

检查安装

检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version

node -v
node -version

npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

1、使用命令行查看npm是否安装成功，输入命令行：npm -v

npm -v

如果以上两种测试能出现以下界面，即代码node和npm安装成功。

2、使用场景需求：

        从npm服务器下载别人编写的第三方包到本地使用。

        从npm服务器下载并安装别人编写的命令程序到本地使用。

        将自己编写的包或命令行程序上传到npm服务器供别人使用。

3、npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

           npm install -g cnpm --registry=https://registry.npm.taobao.org

---

安装脚手架 

vue cli 脚手架的安装 

然后，按照以下步骤进行操作：

打开终端（或命令提示符）并进入要创建项目的目录。

运行以下命令来安装Vue脚手架（Vue CLI）：

1.通过npm全局安装@vue/cli脚手架  

npm install -g @vue/cli

2.安装淘宝镜像的命令行

①  npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些：

 ②cnpm install -g @vue/cli

3.卸载命令

如需要卸载vue/cli包，可执行以下命令行

npm uninstall -g @vue/cli

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

vue -V

---

安装完成后实现Vue项目化

创建Vue项目

首先，在命令行中运行以下命令，创建一个新的Vue项目。

vue create 项目名称

请将“项目名称”替换为您想要使用的实际项目名称。 

vue create helloworld
vue create project-name

 

运行上述命令后，会出现一个交互式的界面，您可以选择手动配置项目，或者选择默认配置并直接回车。您也可以根据需要选择不同的特性和插件。

1. 配置项目：根据项目需求，进行项目的配置。可以选择使用默认配置，也可以手动进行配置。

2. 创建组件：在src/components/目录下创建Vue组件。每个组件应该有自己的文件夹，包含一个以组件名命名的Vue文件和一个用于导出组件的index.js文件。

3. 创建页面：在src/views/目录下创建Vue页面组件。每个页面组件应该有自己的文件夹，包含一个以页面名命名的Vue文件和一个用于导出页面组件的index.js文件。

4. 配置路由：在src/router/index.js中配置Vue的路由。根据项目需要，添加路由配置，指定页面组件和对应的路径。

5. 添加样式：可以在src/assets/目录下添加样式文件，如CSS、Less、Sass等。

6. 创建服务：如果需要与后端进行交互，可以在src/services/目录下创建服务文件，封装数据请求和处理逻辑。

7. 创建模块：根据项目需要，可以在src/store/目录下创建Vuex模块，用于管理应用的状态。

8. 使用组件、页面和服务：在需要使用组件、页面和服务的地方，引入相应的文件，并在Vue实例中注册、使用它们。

 创建完成后，进入项目目录：cd 项目名称

cd 项目名称
cd helloworld

 运行以下命令来启动开发服务器并查看您的项目： 

npm run serve

打开浏览器，输入http://localhost:8080 (或者其他显示在终端中的地址)来访问您的Vue项目。

通过图形化创建项目

cmd打开终端，输入命令行，自动跳转项目管理器

vue ui 

具体操作可以看这个视频

Vue创建项目操作

 项目创建成功之后，可以看到helloworld的项目目录结构如图所示：

 目录结构说明如下：

以上步骤是基本的Vue项目化实现过程，根据实际项目的需求，可能还需要进行其他的配置和扩展。

Element-网站快速成型工具的网址

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CNvue.js前端框架技术课堂实操项目接口文档

Apipost-基于协作, 不止于API文档、调试、Mock、自动化测试ApiPost更懂中国程序员https://console-docs.apipost.cn/van2轻量、可靠的移动端 Vue 组件库

https://vant-contrib.gitee.io/https://vant-contrib.gitee.io/