VUE 3.x 实战项目从0到1搭建

不怕麻烦的鹿丸

已于 2024-02-02 10:00:54 修改

阅读量3.6k

点赞数 1

分类专栏： Vue HTML5 JavaScript 文章标签： vue 前端 javascript html5 vue.js html 前端框架

于 2022-04-01 15:51:00 首次发布

本文链接：https://blog.csdn.net/qq_31851435/article/details/123877569

版权

2、vue-cli-service serve

3、vue-cli-service build

一、开发环境配置

1、安装node.js

通过官网下载安装node.js

http://nodejs.cn/

在用 Vue 构建大型应用时需要使用到node里面的 npm 来安装各种插件

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

2、npm配置淘宝镜像

如果在本地一直装不上npm的包，可以考虑用国内的淘宝镜像，使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

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

3、安装 Vue CLI

Vue CLI 是 Vue 提供的一个命令行工具，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

对于 Vue 3，我们应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。

可以使用下列任一命令安装cli：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，我们就可以在命令行中访问 vue 命令。可以通过简单运行命令 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

查看vue版本可输入以下命令，可检查其版本是否正确：

vue --version

升级版本

如需升级全局的 Vue CLI 包，可运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

4、创建一个项目

运行 vue create 命令创建一个名为 hello-world 的项目

vue create hello-world

运行之后，我们会被提示选取一个 preset。

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

二、项目框架结构

|- node_modules // 项目依赖包
|- public // 一般用于存放静态文件，打包时会被直接复制到输出目录(./dist)
|- src // 项目源代码
    |- assets // 静态资源文件夹，用于存放静态资源，打包时会经过 webpack 处理
    |- components // 组件文件夹，存放 Vue 组件
         └─ loading
                   |- index.vue
                   |- index.ts
                   |- index.less
    |- pages // 页面视图文件夹
         |- Index
              |- index.vue
              |- index.ts
              |- index.less
    |- router // 路由配置文件夹
          |- router.js // 路由文件配置
    |- store // vuex文件夹
          ├── index.js          # 我们组装模块并导出 store 的地方
          ├── actions.js        # 根级别的 action
          ├── mutations.js      # 根级别的 mutation
          └── modules
                  ├── cart.js       # 购物车模块
                  └── products.js   # 产品模块
    |- service // 服务请求文件夹
          |- http.js // 请求接口文件
          |- request.js // 请求配置文件
    |- utils // 工具类文件夹
    |- App.vue // 入口文件
    |- main.js // 注册路由与服务
|- .env // 环境配置文件
|- .env.development // dev环境配置文件
|- .env.test // test环境配置文件
|- .env.production // prd环境配置文件
|- vue.config.js // 配置文件
|- package.json // 包管理代码
|- .gitignore // git忽略文件
|- README.md // 说明文件

三、常用的集成

1、Vue Router

安装

npm install vue-router@4

使用

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

App.vue

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->

最低0.47元/天解锁文章

不怕麻烦的鹿丸

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
VUE 3.x 实战项目从0到1搭建

一、开发环境配置1、安装node.js通过官网下载安装node.jshttp://nodejs.cn/在用 Vue 构建大型应用时需要使用到node里面的 npm 来安装各种插件Node 版本要求Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。2、npm配置淘宝镜像如果在本地一直装不上npm的包，可以考虑用国内的淘宝镜像，使用淘宝定制的 ...
复制链接

扫一扫