vuePress项目搭建及配置

40 篇文章 2 订阅

参考链接1: https://www.cnblogs.com/softidea/p/10084946.html.
参考链接2: https://www.jianshu.com/p/2ac5727947cd.
demo代码地址:https://gitee.com/wk1255315430/vue-press-demo.git

搭建

  1. 创建项目文件夹
mkdir vuepressBlogDemo
  1. 全局安装 VuePress
// An highlighted block
npm install -g vuepress
  1. 进入 vuepressBlogDemo 文件夹,初始化项目
npm init -y
  1. 进入package.json,修改脚本内容
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  1. 修改配置文件 - config.js
module.exports = {
    title: 'Hello VuePress',
    description: 'Hello, my friend!',
    head: [
        ['link', {
            rel: 'icon',
            href: `/favicon.ico`
        }]
    ],
    dest: './docs/.vuepress/dist',
    ga: '',
    evergreen: true,
    themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Guide', link: '/guide/' },
          {
            text: 'Languages',
            items: [
              { text: 'Chinese', link: '/Languages/chinese/' },
              { text: 'English', link: '/Languages/english/' }
            ]
          },
          { text: 'External', link: 'https://www.baidu.com' },
        ],
        sidebarDepth: 2,
        sidebar: [
        {
            title: 'Guide',
            collapsable: false,
            children: ['/guide/']
        },{
            title: 'Languages',
            collapsable: false,
            children: [ { title: "chinese", path: "/Languages/chinese/" },'/Languages/english/']

        }        
        ]
    }
}
  1. 创建文件夹和文件
    在 vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress 文件夹,在.vuepress中创建 public 文件夹和 config.js 文件,最终项目结构如下所示:
vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
// An highlighted block
var foo = 'bar';
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue环境搭建和项目配置主要包括以下几个步骤: 1. 安装Node.js和npm:Vue是基于Node.js开发的,所以需要先安装Node.js和npm。可以从官网下载Node.js安装包,安装完成后打开终端输入`node -v`和`npm -v`命令查看版本号,以确认安装成功。 2. 安装Vue CLI:Vue CLI是Vue的脚手架工具,可以快速搭建Vue项目。可以使用npm或者yarn安装,命令如下: ``` npm install -g @vue/cli ``` 3. 创建Vue项目:使用Vue CLI创建Vue项目非常简单,只需要在终端中输入以下命令即可: ``` vue create your-project-name ``` 在创建过程中会提示选择一些选项,例如是否使用ESLint、是否使用Vue Router等。根据需要进行选择即可。 4. 项目配置:在Vue项目的根目录下,有一个`vue.config.js`文件,可以在这个文件中进行一些项目配置,例如设置代理、设置打包路径等。配置完成后需要重新启动项目才能生效。 5. 安装Vue插件:Vue插件可以扩展Vue的功能,例如Vue Router用于路由管理、Vuex用于状态管理等。可以使用npm或者yarn安装各种Vue插件。 6. 启动开发服务器:使用以下命令启动开发服务器: ``` npm run serve ``` 启动成功后可以通过浏览器访问`http://localhost:8080`来查看项目运行效果。 7. 打包部署:使用以下命令将Vue项目打包为静态文件: ``` npm run build ``` 打包完成后会在`dist`目录下生成打包好的文件,可以将这些文件部署到服务器上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值